Question

希望这是一个简单的问题。我正在努力学习骨干，我坚持一个非常简单的事情。当我使用create方法更新集合时，视图上的渲染永远不会被调用。我认为这应该在没有显式调用render的情况下发生我没有加载任何动态的东西，在这个脚本触发之前它都在dom中。 click事件工作正常，我可以将新模型添加到集合中，但视图中的渲染永远不会触发。

$(function(){

window.QuizMe = {};

// create a model for our quizzes
QuizMe.Quiz = Backbone.Model.extend({
// override post for now
"sync": function (){return true},

});

QuizMe._QuizCollection = Backbone.Collection.extend({
model: QuizMe.Quiz,
});

QuizMe.QuizCollection = new QuizMe._QuizCollection

QuizMe.QuizView = Backbone.View.extend({

el:$('#QuizMeApp'),

template: _.template($('#quizList').html()),

events: {
  "click #addQuiz" : "addQuizDialog",
},

initialize: function() {
// is this right?
  _.bindAll(this,"render","addQuizDialog")
  this.model.bind('add', this.render, this);

},

addQuizDialog: function(event){
  console.log('addQuizDialog called')
  QuizMe.QuizCollection.create({display:"this is a display2",description:"this is a succinct description"});  
},

render: function() {
  console.log("render called")
},
});

QuizMe.App = new QuizMe.QuizView({model:QuizMe.Quiz})

});

Answer 1

您的问题是您绑定到模型：

this.model.bind('add', this.render, this);

但您要添加集合：

QuizMe.QuizCollection.create({
    display:     "this is a display2",
    description: "this is a succinct description"
});

视图通常具有关联的集合或模型，但不能同时具有两者。如果您希望QuizView列出已知的测验，那么：

您应该将其称为QuizListView或类似的东西。
创建一个显示单个测验的新QuizView;这个观点将有一个模型。
修改您的QuizListView以使用集合。

你应该得到这样的东西：

QuizMe.QuizListView = Backbone.View.extend({
    // ...
    initialize: function() {
        // You don't need to bind event handlers anymore, newer
        // Backbones use the right context by themselves.
        _.bindAll(this, 'render');
        this.collection.bind('add', this.render);
    },
    addQuizDialog: function(event) {
        this.collection.create({
            display:     "this is a display2",
            description: "this is a succinct description"
        });
    },
    render: function() {
        console.log("render called")
        // And some stuff in here to add QuizView instances to this.$el
        return this; // Your render() should always do this.
    }
});

QuizMe.App = new QuizMe.QuizView({ collection: QuizMe.QuizCollection });

在render之后观察尾随的逗号，较旧的IE会对此感到不安并导致难以追踪错误。

我会给你一个快速演示，但http://jsfiddle.net/目前正在关闭。当它回来时，你可以从http://jsfiddle.net/ambiguous/RRXnK/开始玩游戏，那个小提琴已经设置了所有合适的Backbone东西（jQuery，Backbone和Underscore）。

Backbone.Collection.Create不会在视图中触发“添加”

1 个答案: