使用jQuery UI对Ember.js项进行排序后，使用Ember Data的model.deleteRecord（）不起作用

Question

我正在使用jQuery UI Sortable和Ember.js对项目列表进行排序，它似乎工作得很好，直到我去删除其中一个Ember数据记录。 模型已正确删除，但UI不会更新以反映该模型。 如果删除最后一条记录，则会引发索引超出范围错误。 如果删除了中间的记录，它后一个是从DOM中删除。 如果删除第一条记录，则会从DOM中删除第一条记录和第二条记录。 是什么赋予了？

鉴于以下Handlebars：

<script type="text/x-handlebars" data-template-name="application">
    <h1>Ember Data + jQueryUI Sortable Problems</h1>
    {{outlet}}
    Try sorting and then deleting something. The model is deleted properly, but the DOM does not reflect that. Sometimes it stays in the DOM, sometimes the wrong one is deleted, and sometimes both the right and a wrong one is deleted.
</script>
<script type="text/x-handlebars" data-template-name="index">
    {{#each model}}
        {{render 'formField' this}}
    {{/each}}
</script>
<script type="text/x-handlebars" data-template-name="formField">
    <div class="form-field" {{bind-attr data-id=id}}>
        <span class="delete" {{action 'delete'}}>X</span>
        {{name}} ({{displayOrder}})
        <span class="handle">#</span>
    </div>
</script>

以下JavaScript：

App.IndexController = Ember.ArrayController.extend({
    sortProperties: ['displayOrder'], // Force sort by displayOrder, not ID
    updatePositions : function(positionData){
          this.propertyWillChange('content'); // Manually notify Ember
          this.get('content').forEach(function(formField) {
              var key = formField.get('id');
              formField.set('displayOrder', positionData[key] + 1);
          });
          this.propertyDidChange('content'); // Manually notify Ember
      }
    });

App.IndexView = Ember.View.extend({
    handleSort: function(event,ui){
        var positionData = {};
        this.$(".form-field").each(function(index, element){
            // Get model ID from bind-attr in template
            var key = $(element).data('id');
            positionData[key] = index;
        });
        this.get('controller').updatePositions(positionData);
        // Delay recreating the sortable
        Ember.run.next(function(){ this.makeSortable(); }.bind(this));
    },
    makeSortable: Ember.on('didInsertElement', function(){
        try {
            this.$().sortable("destroy");
        } catch(err){ 
            window.console.warn('No sortable to destroy', err);
        }
        finally {
            this.$().sortable({
                handle: '.handle',
                axis: 'y',
                update: this.handleSort.bind(this)
            });
        }
    })
});

App.FormFieldController = Ember.ObjectController.extend({
    actions: {
        'delete': function() {
            window.console.log('deleting record', this.get('name'));
            this.get('model').deleteRecord();
        }
    }
});

这是一个小提琴 。

Answer 1

诀窍在于您使用sortProperties和{{#each model}}或{{#each content}} 。 该sortProperties方法实际上并没有安排content或model ，它安排arrangedContent 。 通过将其更改为{{#each arrangedContent}} ，您的问题就会消失，因为DOM排列将与您的模型排列保持同步。