Ember:Jquery UI可排序和removeObject

时间:2014-08-05 10:07:12

标签: ember.js

在尝试删除记录后,我遇到了问题。我有一个与问题相关的文档模型(hasMany)。在视图中,用户可以将问题拖放到不同的顺序。如果他们点击删除按钮,它应该从视图中删除问题。如果用户重新排序了列表,则单击删除按钮时视图中不会发生任何事情。

我看到了一个exampleArrayController中包含了一个项目列表,并使用了beginPropertyChanges()endPropertyChanges()。我不确定我的问题是否是因为它位于ObjectController内(单个模型包含许多项),但我也尝试了propertyWillChange()propertyDidChange()。如果我在用户单击删除按钮后记录模型,则会看到相关问题已被删除。但是,视图未更新。

import Ember from 'ember';

export default Ember.ObjectController.extend({
    updateSortOrder: function(idx, order) {
        var index = parseInt(idx);
        var question = this.get('model.questions').findBy('idx', index);

        this.propertyWillChange('model.questions');

        if( ! Ember.isEmpty(question)) {
            question.set('order', order);
        }

        this.propertyDidChange('model.questions');
    },


    removeQuestion: function(question) {
        this.propertyWillChange('model.questions');
        this.get('model.questions').removeObject(question);
        this.propertyDidChange('model.questions');
    },

    ...
});



// controller template
{{#each question in model.questions itemController="documents/question-item"}}
    <div class="nf-item" {{bind-attr data-order="question.order" data-idx="question.idx"}}>
    ...
    </div>
{{/each}}


// item controller
import Ember from 'ember';

export default Ember.ObjectController.extend({
    needs: ['documents/create'],

    actions: {
        remove: function() {
            var controller = this.get('controllers.documents/create');
            controller.removeQuestion(this.get('content'));
        }
    }
});


// controller's view
import Ember from 'ember';

export default Ember.View.extend({
    sortable: function() {
        var controller = this.get('controller');

        this.$(".nf-sortable").sortable({
            update: function(event, ui) {
                $('.nf-item').each(function(index) {
                    controller.updateSortOrder($(this).attr('data-idx'), index);
                });
            }
        });
    }.on('didInsertElement')
});

0 个答案:

没有答案