javascript - 渲染项目列表会破坏顺序

Question

我正在尝试从服务器加载订购项目的列表，然后使用我的模板(和 http://sammyjs.org/docs/tutorials/json_store_1 作为指导)呈现它们:

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)

我观察到有趣的效果，在 firebug 控制台中，所有项目都按照服务器返回的顺序记录(按 id 排序)，但是在 DOM 中，它们往往会混合在一起。

发生这种情况是因为 render() 并行逻辑吗？如何确保 DOM 中保留项目的顺序？谢谢!

Answer 1

按照 Aaron Quint(Sammy 的作者)在 Google group 上的建议使用 renderEach :

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)