javascript - Ember.js 和 jQuery 可排序。如何解决变形脚本

Question

我有一个 ember.js 应用程序，我想在它上面使用 jquery ui 的可排序小部件。我的观点看起来像

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

排序工作正常，直到其中一个绑定需要更新。问题是每个<li>都被 ember 臭名昭著的变形<script>标签包围。查看此图像中生成的实际 DOM

有没有一种简单的方法可以让这两个很好地一起玩？

有没有办法强制视图重新绘制？deactivate在触发可排序事件后，我可以轻松实现这一点。

Answer 1

在我看来，使用 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>