Javascript Backbone.js：相同类型的嵌套模型和集合

我对脊梁骨还不熟悉，我正努力把脑袋缠在什么东西上。 让我试着解释一下我想做什么： 我正在制作一个包含SVG元素和SVG组的应用程序。这些组将相互嵌套，如下所示：

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

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

我知道在主干中有类似的关于嵌套等的线索，但我一直没有找到任何帮助

到目前为止，您可以在这里看到我所写的内容： 以下是迄今为止的代码：

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

---

谢谢

您遇到了一个很大的上下文问题：

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

这里你的每一个里面都变了。您可以用以下方式替换它：

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

---

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

很有趣，你的this.el还没有定义。使用它时，您不会忘记。不确定您将如何使用它，但主干不会创建SVG元素，因为该元素需要具有名称空间意识。您需要在initialize中执行类似的操作：this.el=document.createElements，“g”；谢谢面包屋。我错过了。我觉得我在什么地方完全错了