Spine.List not rendering in the view

83 views Asked by At

I'm working on a SpineJs app that has the following setup: Posts (essentially chat rooms), which each have multiple messages in them, exactly like a text message stream, or even a chat room stream. I am having problems getting the Spine.List functionality to work though, but i suspect i'm not doing something quite right…

I have created a Gist of my controller and views: https://gist.github.com/coolbox/6880967

post.main.coffee

Spine   = require('spine')
$       = Spine.$

# Models
Post       = require('models/post')
Session    = require('models/session')
Message    = require('models/message')

class Show extends Spine.Controller
  className: 'show content-area'

  events:
    'submit form': 'submit'

  elements:
    '.messages' : 'messages'

  constructor: ->
    super
    @html require('views/posts/show')
    @active @change

    @list = new Spine.List
      el: @messages
      template: require('views/messages/message')
      selectFirst: true

    @list.bind 'change', @render

    Post.bind 'refresh', @render
    Message.bind 'create', @change

  render: =>
    return if !@postId
    @post = Post.exists(@postId)

    if @post
      messages = @post.messages
      @list.render(messages)

    @html require('views/posts/show')(@post)

  change: (params) =>
    if params.id != @postId
      @postId = params.id

    if Session.first()
      Post.fetch
        id: @postId

    @render()

  submit: (e) =>
    e.preventDefault()
    message = Message.fromForm(e.target)
    message.save()


class Main extends Spine.Stack
  className: 'main stack'

  controllers:
    show: Show

module.exports = Main

show.eco

<ul class='messages'></ul>

<div class='footer'>
  <form class='new-message'>
    <input type="hidden" name="post_id" value="<%= @id %>">
    <textarea name='body' placeholder='Type your message here…' autofocus='autofocus'></textarea>
    <input type='submit' value='Send'>
  </form>
</div>

message.jeco

<li class='item'>
  <%= @body %>
</li>

You'll be able to see that the 'messages' that belong to a Post are included as an array of objects within the Post object. My suspicion is that because the messages aren't Spine objects that they won't work with my Spine.list. If so, what is my best option?

As a heads up, i'm not getting any errors in the console and nothing is rendering on screen, apart from a few other nav bits and pieces i have.

Any help would be much appreciated. Thanks.

0

There are 0 answers