Question

这是我的情况。我在“问题”集合中有一堆“问题”模型。

问题集由SurveyBuilder视图表示。

问题模型由QuestionBuilder视图表示。

所以基本上你有一个UL的QuestionBuilder视图。 UL附加了jQuery可排序（因此您可以重新排序问题）。问题是，一旦我完成重新排序，我想更新模型中更改的“question_number”以反映他们的位置。

Questions集合中有一个'question_number'比较器，因此应该对集合进行排序。现在我只需要一种方法让他们在UL中的.index（）反映他们的question_number。有什么想法吗？

另一个问题是删除问题，我需要更新所有问题编号。现在我使用：

来处理它

var deleted_number = question.get('question_number');
var counter = deleted_number;
var questions = this.each(function(question) {
    if (question.get('question_number') > deleted_number) {
        question.set('question_number', question.get('question_number') - 1);
    }
});
if (this.last()) {
    this.questionCounter = this.last().get('question_number') + 1;
} else {
    this.questionCounter = 1;
}

但似乎必须有一种更直接的方式来做到这一点。

理想情况下，只要在集合上调用remove或在视图中的UL上调用sortstop，就会得到每个QuestionuBuilder视图的.index（），将其模型的question_number更新为.index（）+ 1，并保存（）。

我的模特，观点和收藏集：https://github.com/nycitt/node-survey-builder/tree/master/app/js/survey-builder
屏幕截图：https://docs.google.com/file/d/0B5xZcIdpJm0NczNRclhGeHJZQkE/edit

Answer 1

不止一种方法可以做到这一点，但我会使用Backbone Events。当用户点击完成排序，未在N秒内排序或使用jQuery可排序事件（例如sort）进行排序时发出事件。在v.SurveyBuilder内听取事件。

然后做这样的事情。没有明显的测试，但应该相对容易地到达那里。更新，这应该处理你的删除，因为它不关心过去的东西，只关心它们现在是什么。处理删除然后触发此事件。 更新2 ，第一个例子并不好;在我脑海中编码很多。您必须修改视图，才能将模型的cid插入data-cid的{{1}}属性中。然后，您可以使用集合的li方法更新正确的模型。我看到你已经找到了自己的答案，正如我所说，有多种方法。

.get

Answer 2

我找到了办法！

在SurveyBuilder视图的父视图下（在我的示例中，this.qbViews维护一个QuestionBuilder视图数组）创建一个子视图数组
对于您的收藏（在我的情况下为this.questions），请使用remove将on事件设置为updateIndexes。这意味着每次从this.questions中删除某些内容时，它都会运行updateIndexes
在父视图的events对象中，为您的可排序对象添加sortstop事件（在我的情况下为startstop .question-builders，这是持有questionBuilder视图的UL）也指向到updateIndexes

在updateIndexes中执行以下操作：

updateIndexes: function(){
    //Go through each of our Views and set the underlying model's question_number to 
    //whatever the index is in the list + 1
    _.each(this.qbViews, function(qbView){
        var index = qbView.$el.index();

        //Only actually `set`s if it changed
        qbView.model.set('question_number', index + 1);
    });
},

还有我的SurveyBuilder视图的完整代码：

v.SurveyBuilder = v.Page.extend({
    template: JST["app/templates/pages/survey-builder.hb"],
    initialize: function() {
        this.qbViews = []; //will hold all of our QuestionBuilder views

        this.questions = new c.Questions(); //will hold the Questions collection
        this.questions.on('add', this.addQuestion, this); 
        this.questions.on('remove', this.updateIndexes, this); //We need to update Question Numbers
    },
    bindSortable: function() {
        $('.question-builders').sortable({
            items: '>li',
            handle: '.move-question',
            placeholder: 'placeholder span11'
        }); 
    },
    addQuestion: function(question) {
        var view = new v.QuestionBuilder({
            model: question
        });

        //Push it onto the Views array
        this.qbViews.push(view);

        $('.question-builders').append(view.render().el);
        this.bindSortable();
    },
    updateIndexes: function(){
        //Go through each of our Views and set the underlying model's question_number to 
        //whatever the index is in the list + 1
        _.each(this.qbViews, function(qbView){
            var index = qbView.$el.index();

            //Only actually `set`s if it changed
            qbView.model.set('question_number', index + 1);
        });
    },
    events: {
        'click .add-question': function() {
            this.questions.add({});
        },
        //need to update question numbers when we resort
        'sortstop .question-builders': 'updateIndexes'
    } 
});

以下是我的Views文件的完整代码的永久链接： https://github.com/nycitt/node-survey-builder/blob/1bee2f0b8a04006aac10d7ecdf6cb19b29de8c12/app/js/survey-builder/views.js

在Backbone.js中，如何在视图中处理基于jQuery Sortable的序号和更改编号？

2 个答案: