1

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

<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在重新加载页面之前我无法重新渲染任何内容。

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

4

1 回答 1

0

在不久的将来会有更好的方法来做到这一点，因为 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

于 2013-11-19T18:19:57.203 回答