Ember.js和jQuery可排序。如何解决变形脚本 [英] Ember.js and jQuery Sortable. How to work around the metamorph scripts

问题描述

我有一个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/

handlebars：

 < script type =text / x-车把> 
 {{view App.JQuerySortableView content = model}} 
< a {{action removeItem}}>删除第二项< / a> 
< / script> 
 
< script type =text / x-handlebarsdata-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（）; 
} 
}）; 
  

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>

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?

Is there a way to force the view to repaint? I could easily implement that after the sortable deactivate event is fired.

解决方案

It seems to me that using Ember.CollectionView, could solve this. So I gave a try. It seems to work: http://jsfiddle.net/8ahjd/

handlebars:

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

​

这篇关于Ember.js和jQuery可排序。如何解决变形脚本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！