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

Im新的Backbone，我正在挣扎着围着我的脑袋。让我试试解释一下我在做什么：我正在制作一个包含SVG组的SVG元素的应用程序。该小组将嵌套对方这样的范围内：Backbone.js：嵌套相同类型的模型和集合

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

我试图用主干创建一个模型，并为每个组的视图。并使用集合在其中嵌套儿童群体。

到目前为止，我已经编写了以下代码，只是使用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));

感谢

来源

2013-04-02 Finn Fitzsimons

很有趣，你的this.el是未定义的。处理它（你没有忘记）。 – Loamhoof

不知道你将如何去做，但Backbone不会创建SVG元素，因为元素需要具有名称空间感知能力。你需要在initialize中做这样的事情：this.el = document.createElementNS（'http://www.w3.org/2000/svg'，'g'）; –

你有相当大的范围内的问题：

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

哦，顺便说一下，骨干的收藏代理了大量的下划线方法，所以我冒昧地改变你的每一个。您也可以用this.model.children.length替换this.model.children.models.length。学习使用集合，不仅是内部的数组:)

来源

2013-04-02 12:27:07 Loamhoof

感谢Loamhoof。我错过了。我以为我在某个地方完全错了 –

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

回答

相关问题