Ember.js 和 jQuery 可排序.如何解决变形脚本 [英] Ember.js and jQuery Sortable. How to work around the metamorph scripts
问题描述
我有一个 ember.js 应用程序,我想在它上面使用 jquery ui 的可排序小部件.我的观点看起来像
I have an ember.js app that I would like to use jquery ui's sortable widget on. My view looks like
<ul id="sort-container">
{{#each content}}
<li>{{title}}</li>
{{/each}}
</ul>
排序工作正常,直到其中一个绑定需要更新.问题是每个 都被 ember 臭名昭著的变形
标签包围.查看此图片中生成的实际 DOM
Sorting works fine, until one of the bindings needs to update. The problem is that each <li>
gets surrounded by ember's infamous metamorph <script>
tags. See the actual DOM generated in this image
有没有简单的方法可以让这两者很好地一起玩?
Is there an easy way to make these two play nicely together?
有没有办法强制视图重新绘制?在可排序的 deactivate
事件被触发后,我可以轻松实现这一点.
Is there a way to force the view to repaint? I could easily implement that after the sortable deactivate
event is fired.
推荐答案
在我看来,使用 Ember.CollectionView 可以解决这个问题.所以我试了一下.它似乎有效:http://jsfiddle.net/8ahjd/
It seems to me that using Ember.CollectionView, could solve this. So I gave a try. It seems to work: 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:
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();
}
});
这篇关于Ember.js 和 jQuery 可排序.如何解决变形脚本的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!