我有一个ember.js应用程序,我想使用
jquery ui的可排序的小部件.我的看法看起来像
<ul id="sort-container">
{{#each content}}
<li>{{title}}</li>
{{/each}}
</ul>
排序工作正常,直到其中一个绑定需要更新.问题是每个< li>被ember臭名昭着的变态< script>标签.查看此图像中生成的实际DOM
有没有一个简单的方法让这两个玩得很好？
有没有办法强迫观点重绘？在可排除的停用事件被触发后,我可以很容易地实现.
解决方法
在我看来,使用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();
}
});
