Backbone.Collection.Create不触发＆QUOT;新增]鉴于 [英] Backbone.Collection.Create not triggering "add" in view

问题描述

希望这是一个简单的问题。我想学习骨干，我被困在一个非常简单的事情。渲染视图上，当我通过创建方法更新集合永远不会被调用。我想这应该没有显式调用渲染发生。我不加载任何动态，这一切都在DOM这个脚本触发之前。单击事件工作得很好，我可以添加新车型的集合，但在视图渲染永远不会触发。

  $（函数（）{window.QuizMe = {};//为我们的测验模型
QuizMe.Quiz = Backbone.Model.extend（{
//覆盖后，现在
同步：函数（）{返回true}，}）;QuizMe._QuizCollection = Backbone.Collection.extend（{
型号：QuizMe.Quiz，
}）;QuizMe.QuizCollection =新QuizMe._QuizCollectionQuizMe.QuizView = Backbone.View.extend（{EL：$（'＃QuizMeApp'），模板：_.template（$（'＃quizList'）HTML（）。）事件：{
  点击#addQuiz：addQuizDialog
}，初始化：功能（）{
// 这是正确的吗？
  _.bindAll（这一点，渲染，addQuizDialog）
  this.model.bind（添加，this.render，这一点）;}，addQuizDialog：函数（事件）{
  的console.log（'addQuizDialog称为）
  QuizMe.QuizCollection.create（{显示：这是一个显示2介绍：这是一个简洁的说明}）;
}，渲染：功能（）{
  的console.log（渲染所谓）
}，
}）;QuizMe.App =新QuizMe.QuizView（{模式：QuizMe.Quiz}）}）;
 

解决方案

您的问题是，你绑定到的模式的：

  this.model.bind（添加，this.render，这一点）;
 

但您要添加到的集的：

  QuizMe.QuizCollection.create（{
    显示：这是一个显示2
    说明：这是一个简洁的说明
}）;
 

一个视图通常有一个相关的集合或模型，但不能同时使用。如果你希望你的 QuizView 来列出已知的测验则：

1. 您也许应该把它叫做 QuizListView 或类似的东西。


2. 创建一个新的 QuizView 显示单个竞猜;这种观点将有一个样板。


3. 返修你的 QuizListView 与收集工作。

您应该像这样结束：

  QuizMe.QuizListView = Backbone.View.extend（{
    // ...
    初始化：功能（）{
        //你不必再绑定的事件处理程序，更新
        //主干自己使用正确的上下文。
        _.bindAll（这一点，'渲染'）;
        this.collection.bind（添加，this.render）;
    }，
    addQuizDialog：函数（事件）{
        this.collection.create（{
            显示：这是一个显示2
            说明：这是一个简洁的说明
        }）;
    }，
    渲染：功能（）{
        的console.log（渲染所谓）
        //而在这里有些东西QuizView实例添加到这一点。$埃尔
        返回此; //你的渲染（）应该总是这样做。
    }
}）;QuizMe.App =新QuizMe.QuizView（{集合：QuizMe.QuizCollection}）;
 

和手表，经过尾随逗号渲染，老年人的IE生气有关，并导致难以跟踪的错误。

我给你一个快速演示，但 http://jsfiddle.net/ 是下降的时刻。当它回来的时候，你可以用 http://jsfiddle.net/ambiguous/RRXnK/ 开始玩，那提琴拥有所有适当的骨干东西（jQuery的，骨干和下划线）已经成立。

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);

but you're adding to a collection:

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

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

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

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不触发＆QUOT;新增]鉴于的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！