1

次のように、Meteor のネストされたテンプレートでソート可能な jquery-ui を使用しようとしています。問題の 2 つのテンプレートは次のとおりです。

<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()

}

このコードを機能させて順序を適切に再レンダリングする唯一の方法は、ソート可能な要素が .xml で更新された直後にコンテナを空にすること$('.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 -dnd-animated.meteor.com

于 2013-11-19T18:19:57.203 に答える