2012-06-04 73 views
0

使用backbone.js:如何構建嵌套的模型和視圖?

我有一個ModelA集合,它包含幾個屬性,還有一個包含幾個ModelB的「節點」。 ModelB還包含幾個屬性。

CollectionA 

ModelA 
    Attribute 1 
    . 
    . 
    Attribute n 
    "Node" 
    ModelB 
     Attribute 1 
     Attribute 2 
    ModelB 
     Attribute 1 
     Attribute 2 

ModelA 
    Attribute 1 
    . 
    . 
    Attribute n 
    "Node" 
    ModelB 
     Attribute 1 
     Attribute 2 
    ModelB 
     Attribute 1 
     Attribute 2 

我仍在研究意見,但主要想法是,意見應以類似的方式構建。 (集合視圖包含幾個視圖A,其中包含幾個視圖B)。相同的ModelB將永遠不會在多個ViewB之間共享。

Q1:設計是否有意義,還是我應該考慮的任何明顯的缺陷? (這是我第一次嘗試使用BackboneJs)。

Q2:設置「節點」的最佳方法是什麼?現在我正在使用ModelB的數組。是否有可能在每個ModelA上都有一個ModelB集合?哪種方法更好?

任何指導方針appriciated!

我還想指出,我已閱讀this關於相關問題的優秀帖子(推薦)。然而,這種情況並沒有像本例那樣在數組/集合中包含ModelB。

+0

如果這是您首次嘗試使用Backbone,也許您應該輕鬆一點,並嘗試先構建簡單的東西?這就是說我前幾天發佈了這個:http://stackoverflow.com/questions/10871369/how-to-handle-relations-in-backbone-js/10873385#10873385我特指那裏的'getEventComments'。 我也不太清楚你的意思是什麼'節點',你可以重寫你的僞代碼的一些例子骨幹代碼? – Mosselman

回答

2

Q1:設計是否有意義,還是我應該考慮的任何明顯的缺陷? 設計假設:集合A有很多模型A,模型A有模型B的集合,每個模型B都有它自己的視圖B.

Q2:可能在每個ModelA上有ModelB的集合?

答案:可以。

模型中有一堆相關的子模型「in」是相當普遍的。你可以通過創建(比如你提到的)一個數組,一個對象,一個容納這些Model B的集合(我們稱之爲容器)來完成這件事。基本的方法是創建容器然後實例化新模型,將它們插入。最有可能的是,您希望在模型B中爲相關的父模型A提供某種引用,以便稍後可以返回到該狀態。像每個模型B都有一個ModelA_ID作爲屬性。

這可能是Paul Uithol的Backbone-Relational的一個很好的用法。

藉助Backbone-Relational,您可以設置您的模型(類)並將其定義爲具有模型B的集合。這是代碼的樣子。

ModelA = Backbone.RelationalModel.extend({ 
    relations: [{ 
     type: Backbone.HasMany, 
     key: 'modelBs', 
     relatedModel: 'ModelB', 
     collectionType: 'ModelBCollection', 
     reverseRelation: { 
      key: 'parentA' 
     } 
    }], 
    defaults: ..., 
    initialize: ..., 
    etc. ... // Other instance properties and functions of model. 
}); 

當你這樣做,你將實例型號有BS的集合,可以通過MODELA引用每一個模型中的屬性modelBs。或您指定的任何鍵。

下面是實例化ModelA的例子。

myModelA = new ModelA({ 
    // Setting up ModelA attributes... 
    'modelBs': [1, 3, 7] 
}); 

我實例化的MODELA,並與設置,您可能已定義的其他屬性一起,我還建立了MODELA的屬性modelBs的價值。這是與ModelA相關的每個ModelB的一個ID數組。這就是您的集合知道哪些ModelB與此ModelA關聯的方式。

myModelA.fetchRelated('modelBs'); 

.fetchRelated()調用發送到服務器,填入modelBs收集與ModelB 1,3的請求,和7

當你想訪問MODELA ModelBs的集合,你會簡單地做像這樣的東西。

myModelA.get('modelBs'); 

這會返回與ModelA相關的ModelB集合,假設您已經獲取相關模型並且集合中有ModelB。

Backbone-Relational的好處在於它可以很容易地在父模型的實例化時自動建立這些定義的關係。它也創建了反向關係,因此從父母到子女,從小孩到父母都很容易。

如果我操縱ModelB並想要到ModelA,我使用reverseRelation鍵我建立了parentA

someModelB.get('parentA'); // Points to the related ModelA 

它還有助於綁定和一些其他問題,當你在模型中的模型中有模型時可以支撐。關係適用於一對一,一對多和反向關係。有很多很多的解決方法,但我不認爲這很常見,因爲這與建立方式有關。

至於意見,我不確定你在想什麼,但你需要有一個「收集」的意見?

假設您的ModelA具有ModelB集合。每個ModelB都有一個關聯的視圖。這與老式LIST的概念非常吻合。

<div id="ModelAView"> 
    <ul> 
     <li>ModelB_1</li> 
     <li>ModelB_3</li> 
     <li>ModelB_7</li> 
    </ul> 
</div> 

雖然有一堆ModelBs,但您已經擁有它們在一個集合中很乾淨整齊。如果您採用數據驅動的方式管理視圖,則無需將視圖對象置於另一個列表中。相反,你可以讓他們自己管理!

// Assume when you instantiate ViewB, you pass to it a ModelB. 

ViewB = Backbone.View.extend({ 
    initialize: function() { 
     this.model.bind('remove', this.remove, this); 
     this.model.bind('update:colorAttr', this.updateColor, this); 
    }, 
    updateColor: function() { 
     this.$el.css('color', this.model.colorAttr); 
    } 
}); 

現在說你從你的收藏擺脫ModelB的。

myModelA.get('modelBs').remove(someModelB); 

然後,與該modelB相關聯的視圖將自動從視圖中移除。

不知道這是你的想法。我通常會採用這種方法。無論如何,如果有更多的細節只是在評論中發表。希望這可以幫助。