Question

我真的很生气：

var BoardNumber = Backbone.Model.extend({
    defaults: function(){
        return {
            value: 0,
            selected: false
        };
    },

    toggle: function() {
        this.save({selected: !this.get("selected")});
    }
});

var BoardNumberView = Backbone.View.extend({
tagName: "li",
template: _.template('<div class="boardNumber"><p>{{value}}</p></div>'),

events: {
    "click .boardNumber": "toggleDone",
    "click .selected": "toggleDone"
},

initialize: function () {
    this.listenTo(this.model, 'change', this.render);
},

render: function () {
    this.$el.html(this.template(this.model.toJSON()));
    return this;
},

toggleDone: function (evt) {
    this.model.toggle();
}
});

var NumbersOnBoard = Backbone.Collection.extend({
model: BoardNumber,
toGenerate: 80,
url: "/numbers",
initialize: function(){
    var i = this.toGenerate;
    while(i--){
        this.create({ value: this.toGenerate-i });
    }
},
selected: function(){
    return this.where({selected: true});
}
});

并没有其他任何必要..当我点击它时，标题中有这个错误，我真的不知道它可能是什么

编辑：添加了收藏和完整视图。注意：click会完美地启动事件this.render，然后才会使错误发生错误，就像该模型中的事件监听器消失一样。

编辑＃2：对于堆栈跟踪，在Backbone的开发版本中显示：

triggerEvents              backbone.js:205
Backbone.Events.trigger    backbone.js:146
_.extend._onModelEvent     backbone.js:933
triggerEvents              backbone.js:206
Backbone.Events.trigger    backbone.js:147  
_.extend.set               backbone.js:370

Answer 1

您发布的代码似乎没有任何内在错误，因此可以安全地假设根本原因是缺少初始化代码。

我能够使用你的代码，对它应该如何工作做出一些假设：

您正在呈现NumbersOnBoard集合生成的项目列表。
创建此项目列表并在收集新内容时将其保存到数据库中。
集合中的每个模型都在某种父视图中呈现。
此父视图将每个子视图附加到DOM的某个位置，可能在它自己的容器中
模型代表某种可选项;点击后状态发生变化，并立即保存到数据库

假设这一切都是真的，this fiddle demonstrates it successfully issuing a GET request on click。为了使它工作，我添加了一个CollectionView，负责渲染每个BoardNumberView。

var CollectionView = Backbone.View.extend({
    tagName: 'ul',
    itemView: BoardNumberView,
    children: [],
    initialize: function(options) {
        this.collection = options.collection;
    },
    render: function() {
        var self = this;
        _.each(this.collection.models, function(child) {
            var view = new self.itemView({
                model: child
            });
            view.render();
            self.children.push(view);
            self.$el.append(view.$el);
        });
        return this;
    },
    close: function() {
        while (this.children.length) {
            var child = this.children.pop();
            child.close();
        }
    }
});

var collection = new NumbersOnBoard();
var cv = new CollectionView({
    collection: collection
});

$('body').append(cv.render().$el);

Answer 2

为了渲染项目列表，我建议使用Backbone Marionette，这样就可以在示例中编写所有样板代码。

在这种情况下，BoardNumberView将是ItemView，集合呈现视图将是CollectionView或CompositeView。

它的文档很简单，但如果你想进一步调查，我会推荐posts of David Sulc。

Answer 3

感谢大家的回复，我刚刚发现了它的错误。在BoardNumberView的父视图中，在初始化中有以下代码：

this.listenTo(numbersOnBoard, 'change', this.addAll());

发生了错误的事件。当我将其更改为：

时，一切正常

this.listenTo(numbersOnBoard, 'reset', this.addAll());

我在某种程度上理解为什么，看看Backbone的代码。有人知道它在Backbone中是如何工作的，并用简单的段落解释它吗？

再次感谢你，真的。

编辑：不，是我传递this.addAll（）而不是this.addAll

Backbone.js listenTo问题，Object [object Object]没有方法'call'

3 个答案: