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：嵌套相同類型的模型和集合

回答

相關問題