使用 jQuery UI 对 Ember.js 项目进行排序后，使用 Ember Data 的 model.deleteRecord() 不起作用答案

【问题标题】：After using jQuery UI to sort an Ember.js item, using Ember Data's model.deleteRecord() doesn't work使用 jQuery UI 对 Ember.js 项目进行排序后，使用 Ember Data 的 model.deleteRecord() 不起作用
【发布时间】：2014-03-29 21:14:15
【问题描述】：

我正在使用带有 Ember.js 的 jQuery UI Sortable 对项目列表进行排序，它似乎工作得很好，直到我去删除一个 Ember Data 记录。模型已正确删除，但 UI 并未更新以反映这一点。如果删除最后一条记录，则会引发 Index Out of Range 错误。如果删除中间记录，则之后的记录将从 DOM 中删除。如果删除第一条记录，它会从 DOM 中删除第一条和第二条记录。什么给了？

给定以下把手：

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

Here's a fiddle.

【问题讨论】：

标签： javascript jquery jquery-ui ember.js ember-data

【解决方案1】：

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

【讨论】：