1

我是 Backbone 的新手，我正在努力将我的头缠在一些东西上。让我试着解释一下我想要做什么：我正在制作一个包含 SVG 元素的应用程序，其中包含 SVG 组。这些组将相互嵌套，如下所示：

http://i.stack.imgur.com/yAkTE.png

我试图使用 Backbone 为每个组创建一个模型和一个视图。并使用集合将子组嵌套在这些组中。

到目前为止，我只使用 div 而不是任何 SVG 编写了以下内容，以便在我实现这方面的事情之前让逻辑正常工作。但我想我的想法可能只是在某个地方完全靠不住，任何帮助都将不胜感激。

我知道在 Backbone 中有关于嵌套等的类似线程，但我无法在其中找到任何帮助。

你可以在这里看到我到目前为止写的 JSFiddle：http: //jsfiddle.net/ZqMeV/ 这是到目前为止的代码：

(function ($) {

var Cell = Backbone.Model.extend({

    initialize: function(){
        this.children = new CellCollection();
    }

});

var CellCollection = Backbone.Collection.extend({
    model: Cell
});

var CellView = Backbone.View.extend({
    tagName: "div",

    initialize: function(){
        if(this.model.children.models.length > 0){
            _.each(this.model.children.models, function(child){
                console.log(child);
                var cell = new CellView({
                    model: child
                });
                $(this.el).append(cell.el);
            });
        } else {
            $(this.el).html('cell');
        }
    }

});

var Canvas = Backbone.Model.extend({
    initialize: function(){
                    //below is just for testing purposes
        this.content = new Cell();
        var c = new Cell();
        var d = new Cell();
        var e = new Cell();
        this.content.children.add(c);
        this.content.children.add(d);
        d.children.add(e);
    }
});

var CanvasView = Backbone.View.extend({
    el: $("#canvas"),
    tagName: "div",
    initialize: function(){
        this.cellView = new CellView({
            model: this.model.content
        });
        $(this.el).append(this.cellView.el);
    }
});

var canvas = new Canvas();
var canvasView = new CanvasView({
    model: canvas
});

} (jQuery));

谢谢

4

1 回答 1

0

你有一个很大的上下文问题： 

_.each(this.model.children.models, function(child){
  console.log(child);
  var cell = new CellView({
    model: child
  });
  $(this.el).append(cell.el);
});

在这里，你this的每一个都发生了变化。您可以将其替换为：

var self = this;
this.model.children.each(function(child) {
  var cell = new CellView({
    model: child
  });
  $(self.el).append(cell.el);
});

哦，顺便说一下，Backbone 的 Collections 代理了很多下划线方法，所以我冒昧地改变了你的每一个。您也可以替换this.model.children.models.length为this.model.children.length。学会使用集合，而不仅仅是里面的数组：）

于 2013-04-02T12:27:07.093 回答