0

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

问题集合由 SurveyBuilder 视图表示。

问题模型由 QuestionBuilder 视图表示。

所以基本上你有一个 QuestionBuilder 视图的 UL。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，然后保存 ( ）。

4

2 回答 2

2

不止一种方法可以做到这一点，但我会使用 Backbone Events。当用户单击完成排序、在 N 秒内未排序或使用 jQuery 可排序事件（如sort. 监听里面的事件v.SurveyBuilder。

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

v.SurveyBuilder = v.Page.extend({
    template: JST["app/templates/pages/survey-builder.hb"],
    initialize: function() {
        this.eventHub = EventHub;
        this.questions = new c.Questions();
        this.questions.on('add', this.addQuestion, this);

        this.eventHub.on('questions:doneSorting', this.updateIndexes)
    },
    updateIndexes: function(e) {
        var that = this;
        this.$('li').each(function(index) {
            var cid = $(this).attr('data-cid');
            that.questions.get(cid).set('question_number', index);
        });
    }
于 2012-12-21T16:16:00.073 回答
0

我想出了一个办法！！！

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

  4. 在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'
    } 
});

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

于 2012-12-21T19:20:26.847 回答