Question

I am trying to load a list of ordered items from the server and then render them using my template (and http://sammyjs.org/docs/tutorials/json_store_1 for guidance):

questions_container = $('.questions_container').first()

@sammy = Sammy '#foo', ->
  @use 'Template'

  @get '#/', (context) ->
    context.log 'Loading questions...'
    @load('questions.json')
      .then (items) ->
        $.each items, (i, item) ->
          context.log item.id
          context.render('assets/question.template', {item: item})
            .appendTo(questions_container)

I observe interesting effect that in the firebug console all items are logged in the order returned by the server (ordered by id), however in the DOM they tend to be mixed up.

Is this happening because of render() parallel logic? How can I make sure that order of items is preserved in DOM? Thanks!

Answer 1

Used renderEach as Aaron Quint (author of Sammy) suggested on Google group:

questions_container = $('.questions_container').first()

@sammy = Sammy '#foo', ->
  @use 'Template'

  @get '#/', (context) ->
    context.log 'Loading questions...'
    @load('questions.json')
      .then (items) ->
        context.renderEach('assets/question.template', items)
          .appendTo(questions_container)