10

jqueryuiのソート可能なウィジェットを使用したいember.jsアプリがあります。私の見解は

<ul id="sort-container">
{{#each content}}
    <li>{{title}}</li>
{{/each}}
</ul>

バインディングの1つを更新する必要があるまで、並べ替えは正常に機能します。問題は、それぞれ<li>が残り火の悪名高いメタモルフタグに囲まれること<script>です。この画像で生成された実際のDOMを参照してください

DOM

これら2つをうまく一緒にプレイさせる簡単な方法はありますか？

ビューを強制的に再描画する方法はありますか？deactivateソート可能なイベントが発生した後、それを簡単に実装できます。

4

1 に答える 1

17

Ember.CollectionViewを使用すると、これを解決できるように思われます。だから私は試してみました。動作しているようです：http：//jsfiddle.net/8ahjd/

ハンドルバー：

<script type="text/x-handlebars">
  {{view App.JQuerySortableView content=model}}
  <a {{action removeItem}}>Remove Second Item</a>
</script>

<script type="text/x-handlebars" data-template-name='jquery-sortable-item'>
  {{view.content.title}}
</script>

javascript：

App = Ember.Application.create();

App.ApplicationController = Ember.ArrayController.extend({
  removeItem: function() {
    this.removeAt(1);        
  }            
});

App.ApplicationRoute = Ember.Route.extend({
  model: function() {
    return [
      {id: 1, title:'Test 1'},
      {id: 2, title:'Test 2'},
      {id: 3, title:'Test 3'}
    ];
  }
});

App.JQuerySortableItemView = Ember.View.extend({
    templateName: 'jquery-sortable-item'        
});

App.JQuerySortableView = Ember.CollectionView.extend({
    tagName: 'ul',
    itemViewClass: App.JQuerySortableItemView, 

    didInsertElement: function(){
        this._super();
        this.$().sortable().disableSelection();
    }
});

</ p>

于 2012-07-31T22:08:43.507 に答える