Marionette Backbone：具有多種可能視圖狀態的Childviews

我正在從香草骨幹轉移到Backbone.Marionette，並試圖以更多的Marionette風格解決常見的設計模式。我有一個共同的模式，有一個子視圖（childview），它可以有多個可能的狀態，每個狀態是由html和css組成的單獨的視圖或狀態。Marionette Backbone：具有多種可能視圖狀態的Childviews

這是配置文件的一個示例。

我的應用程序有一個配置文件對象，每個配置文件都擁有一組註釋。

該配置文件將其筆記列表顯示爲CompositeView（NotesView），該CompositeView由集合中每個筆記的ItemView（NoteView）組成。

每個NoteView都有兩種可能的狀態，即顯示狀態和編輯狀態。我目前正在用html和css完成這種狀態變化。在我的應用程序的其他地方，我通過切換視圖（破壞舊視圖，創建新視圖，附加新視圖）來處理這種設計模式。

我想要做的是爲每個音符NoteDisplayView和NoteEditView創建兩個可能的視圖，然後控制由NotesView呈現的視圖。

閱讀完Marionette文檔後，似乎Marionette解決方案查看交換是使用佈局，區域，然後定義該區域顯示哪個視圖。

我不清楚佈局是否可以嵌入到組合視圖中，以及這是否會使組合視圖的優點無效。

我明顯可以編寫一些自定義代碼來處理這種情況，繼續通過html和css管理NoteView的狀態，但是我想知道其他Marionette用戶發現了哪些設計模式來完成此行爲。

來源

2014-10-02 cvgw

請張貼您的代碼。 – 2014-10-02 19:50:28

是的，我同意，你應該添加一些代碼。但通過瀏覽我認爲你應該考慮使用木偶控制器。 – 2014-10-02 19:53:19

我會盡量回答你的問題，尤其是本節：

「我希望做的是對每一個音符，NoteDisplayView和NoteEditView兩個可能的觀點，然後控制其通過爲NotesView呈現「。

這可以通過重寫來實現CompositeView的getChildView（我猜你正在使用的木偶2.x中，對木偶的1.x它buildItemView）方法，該方法是：

getChildView: function(child) { 
    var childView = this.getOption('childView') || this.constructor; 

    if (!childView) { 
     throw new Marionette.Error({ 
     name: 'NoChildViewError', 
     message: 'A "childView" must be specified' 
     }); 
    } 

    return childView; 
    },

僅在此添加檢查（使用模型的屬性）並返回所需的視圖NoteDisplayView或NoteEditView。

更具體的例子：

讓我們假設每個模型都有屬性「狀態」，這是「顯示」 || 「編輯」。

根據您的狀態，您已經知道如何渲染NotesView。

我想如果它是可編輯的，用戶可以改變它，用戶改變它後按下「保存」，模型將被保存，狀態將被改變顯示。您的CompositeView將捕捉模型的更改事件並將重新渲染您的視圖，但現在模型已經處於顯示模式，因此將呈現NoteDisplayView。

希望這會有所幫助。

來源

2014-10-02 20:32:53

Marionette Backbone：具有多種可能視圖狀態的Childviews

回答

相關問題