Question

我正在尝试使用jteor-ui对Meteor中的嵌套模板进行排序，如下所示。以下是有问题的两个模板：

<template name="activityEditor">
  {{! the main activity editor view }}
  <div class="activity-editor">
    <input type="text" name="title" class="input-xxlarge" value="{{info.title}}" placeholder="Type a title here...">
    <div class="activity-steps">
      {{#each info.steps}}
        {{>activityStepEditor}}
      {{/each}}
    </div>
  </div>
</template>



<template name="activityStepEditor">    
  {{! the container view for each step editor }}
  <div class="activity-step" data-id="{{_id}}">

    <div class="order">{{order}}</div>
    {{!....stuff...}}

  </div>
</template>

和模板代码（使用coffeescript）：

_.extend Template.activityEditor, {

  # ...stuff...

  rendered: ->
    $(".activity-steps").sortable {
      items: '.activity-step'
      handle: '.order'
      update: ->
        stepIds = ($(el).attr('data-id') for el in $('.activity-step'))

        $('.activity-steps').empty() #this must be done in order to steps to re-render properly
        Lab.Activity.reorderSteps stepIds 



    }
    $(".activity-steps").disableSelection()

}

我可以让这段代码正常工作并正确地重新呈现订单的唯一方法是在用$('.activity-steps').empty()更新后立即清空我的可排序元素的容器。我已经尝试取消更新事件并通过更改上下文中观察到的另一个变量来强制重新呈现，但任何更改都会导致Exception from Meteor.flush(): undefined之后我无法重新呈现任何内容，直到页面重新加载。

这似乎有效，一切都很好。所以我的问题是：我有什么理由不这样做吗？有没有更好的，标准的练习方式来处理我没有看到的可排序？

Answer 1

在不久的将来，有更好的方法可以做到这一点，因为Meteor团队正在开发新的渲染引擎：http：// youtube.com/watch?v=ISNEhPG0wnA
（在此视频中，Avital Oliver显示了一种完全无需重新绘制屏幕的方法：列表中的对象实际上已在所有客户端上移动）

有关更多技术信息，请参阅此Meteor的Github Wiki条目：
HTTP：// <强> github.com/meteor/meteor/wiki/New-Template-Engine-Preview

虽然没有正式发布，但如果你现在需要它，你可以尝试Nazar Leush的方法：
http：// github.com/nleush/meteor-todos-sortable-animation
他还在这里发表了一个工作案例：http：// todos-dnd-animated.meteor.com

我得到jquery-ui可以使用流星模板进行排序，但这是一个糟糕的黑客攻击吗？

1 个答案: