Backbone.Collection.Create 不触发“添加"鉴于 [英] Backbone.Collection.Create not triggering "add" in view

问题描述

希望这是一个简单的问题.我正在尝试学习主干，但我被困在一件非常简单的事情上.当我使用 create 方法更新集合时，视图上的渲染永远不会被调用.我认为这应该在不显式调用渲染的情况下发生.我没有加载任何动态内容，在此脚本触发之前，所有内容都在 dom 中.点击事件工作正常，我可以向集合添加新模型，但视图中的渲染永远不会触发.

Hopefully this is an easy question. I'm trying to learn backbone and i'm stuck on a really simple thing. the render on the view never gets called when I update the collection by using the create method. I thought this should happen without explicitly calling render. I'm not loading anything dynamic, it's all in the dom before this script fires. The click event works just fine and I can add new models to the collection, but the render in the view never fires.

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

});

推荐答案

你的问题是你绑定到了模型:

Your problem is that you're binding to the model:

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

但您要添加到集合:

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

一个视图通常有一个关联的集合或模型，但不能同时有两个.如果您希望 QuizView 列出已知测验，则:

A view will usually have an associated collection or model but not both. If you want your QuizView to list the known quizzes then:

1. 您可能应该将其称为 QuizListView 或类似名称.
2. 创建一个新的 QuizView 来显示单个测验；这个视图会有一个模型.
3. 修改您的 QuizListView 以处理集合.

1. You should probably call it QuizListView or something similar.
2. Create a new QuizView that displays a single quiz; this view would have a model.
3. Rework your QuizListView to work with a collection.

你应该得到这样的结果:

You should end up with something like this:

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 对此感到不安并导致难以追踪错误.

And watch that trailing comma after render, older IEs get upset about that and cause difficult to trace bugs.

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

I'd give you a quick demo but http://jsfiddle.net/ is down at the moment. When it comes back, you can start with http://jsfiddle.net/ambiguous/RRXnK/ to play around, that fiddle has all the appropriate Backbone stuff (jQuery, Backbone, and Underscore) already set up.

这篇关于Backbone.Collection.Create 不触发“添加"鉴于的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！