加載爲視圖或視圖模型？

Question

使用Durandal 2.0.1，Knockout 3.0.0，RequireJS 2.1.10。

以下是背景資料，只需設置階段：

我對是否加載一個子項作爲一個視圖或視圖模式的根本問題。我試圖按照Durandaljs網站上的印刷設計。我有一個index.cshtml頁面，它有一個名爲applicationHost的div元素，它使用data-main =「App/main」作爲index.cshtml腳本標記的一部分加載shell.html。

我想我的模塊化的標記，所以裏面shell.html，我一直在使用它加載了header.html一個div：

<!-- ko compose: 'viewmodels/header' --> 
<!-- /ko --> 

裏面header.html中，我還有一個DIV從而未能成功加載guestSummary.html。

guestSummary的視圖模型（guestSummary.js）檢索數據並顯示客人感興趣的一些統計數據，我試圖使用Knockout綁定到guestSummary.html。

由於數據查找的和結合需要在guestSummary.html的控件，我想我會需要使用（內部header.html中）在以下代碼來加載guestSummary.html：

<!-- ko compose: 'viewmodels/guestSummary' --> 
<!-- /ko --> 

當我試試看，我收到以下錯誤消息（來自Google Chrome開發人員工具中的控制檯選項卡）「未捕獲的錯誤：未能加載組合模塊（viewmodels/guestSummary）。詳細信息：模型未定義」。

看着Durandaljs網站，它說：「我們的導航應用程序中的每個頁面都包含一個視圖和一個視圖模型，一旦您按照上面所述設置了結構，所有擴展應用程序在viewmodels文件夾中放入新的視圖模型以及視圖文件夾中的相應視圖，然後在main.js中將其註冊到路由器中。當相應的路由導航到時，路由器將定位您的模塊和組合基礎結構將會看到它被綁定並插入到DOM中「。

上述指導似乎表明我應該使用視圖而不是視圖模型，因爲我不試圖導航到guestSummary.html頁面，並且似乎我不需要將模型添加到路由器和我沒有真正使用路由器導航到guestSummary.html頁面。

因爲guestSummary需要數據和數據綁定，所以我最好加載guestSummary.html作爲VIEW和數據綁定到$ parent（或$ parent.parent等）屬性，而不是試圖合併guestSummary.js文件與guestSummary.html文件並將兩者作爲VIEWMODEL加載？

有沒有更好的方法來做我想要完成的事情？預先感謝您可能願意分享的任何幫助。

Answer 1

如果視圖不需要/保證自己的視圖模型，則可以將視圖綁定到現有視圖模型對象。我們在Using Composition中對此進行了簡要討論。

Composing Explicit Models and Views [when an object is supplied to the compose binding ..]

If a view property exists, but no model property, the view will be resolved and bound to the bindingContext, then injected into the element .. If both model and view properties exist, then they will be bound and injected into the element ..

例如，到一個模型結合明確..

compose: { 
    view: 'views/guestSummary', 
    model: somethingThatResolvesToARelevantModelInThisContext 
} 

的$root在視圖將是model值。

我推薦從來沒有使用$parent屬性，因爲它只是把代碼變成一團糟。相反，在適用的情況下（如每個綁定）和withProperties使用綁定名稱 - 在這種情況下，我甚至會在$ root上使用withProperties來提供更多含義的名稱。