0

I'm going really mad for a thing:

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

and nothing else should be necessary.. when I click on it, there is this error in the title, I don't really know what it can be

EDIT: Added collection and complete view. Note: the click launches the event this.render perfectly, and only then is lanunching the error and it's like the event listener from that model disappears.

EDIT #2: For the stack trace, In the development version of Backbone it shows:

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
4

3 回答 3

0

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

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

  1. 您正在呈现由NumbersOnBoard集合生成的项目列表。
  2. 新建集合时会创建此项目列表并将其保存到数据库中。
  3. 集合中的每个模型都在某种父视图中呈现。
  4. 这个父视图将每个子视图附加到 DOM 的某个地方，可能在它自己的容器中
  5. 模型代表某种可选择的项目；单击时它们的状态会发生变化并立即保留到数据库

假设这一切都是真的，这个小提琴演示了它在 click 上成功发出了一个 GET 请求。为了使它工作，我添加了一个 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);
于 2013-08-06T09:38:30.667 回答
0

谢谢大家的回复，我才发现有什么问题。在 BoardNumberView 的父视图中，在初始化中有这段代码：

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

那是触发错误的事件。当我将其更改为：

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

我以某种方式理解为什么，查看 Backbone 的代码。有人知道它在 Backbone 中的工作原理并用简单的段落进行解释吗？

再次感谢你，真的。

编辑：不，是我通过 this.addAll() 而不是 this.addAll

于 2013-08-06T12:32:27.940 回答
0

为了呈现项目列表，我建议使用Backbone Marionette，它使所有样板代码都编写在示例中。

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

它的文档非常简单，但如果您想进一步调查，我会推荐David Sulc 的帖子。

于 2013-08-06T09:49:21.453 回答