Durandal嵌套視圖組合

我們正在嘗試使用Durandal JS構建SPA應用程序作爲概念，我們的佈局中有頂部導航面板和裝載SPA內容的主容器。在其中一種觀點中，我們留下了帶有導航的側面板，導航應該只改變同一視圖的右側面板。我知道你是Durandal 2.0中的孩子，但我無法實現我的目標。點擊頂部面板應該改變主容器（在頂部有拖曳標籤），但在第二個標籤上，在加載視圖的左側有額外的子導航我無法弄清楚如何讓Durandal只改變右側面板同樣的看法。我並不是要求代碼不是具體實現，而是要求有關如何實現這一點的概念或理論指導。Durandal嵌套視圖組合

我甚至嘗試使用durandal 2.0內的區域，但這似乎與我想要得到的結果不同。

來源

2013-09-27 Rati_Ge

你需要包括你已經嘗試什麼樣的代碼。你解釋的很簡單。 –

你是指JS項目的部分或HTML部分？讓我準備樣品，因爲我不能直接複製/粘貼項目代碼。順便說一下，我們最初的想法是讓ko.observable ActiveView將modulID定義爲其屬性，然後將該屬性綁定到子視圖外。你認爲這是個好主意嗎？ –

樣本是個好主意。我發現，通常，當我遇到困難時，如果我在一個孤立的例子中重現我的問題，我會發現它 - 更容易清楚地看到問題所在。 –

如果您返回Durandal網站，請下載HTML samples.zip文件。消滅那個壞男孩，你會看到ko樣品正在做你正在尋找的東西。

（從KO樣本文件夾中的index.js文件的複印件）

define(['plugins/router', 'knockout'], function(router, ko) { 
    var childRouter = router.createChildRouter() 
     .makeRelative({ 
      moduleId:'ko', 
      fromParent:true 
     }).map([ 
      { route: '',    moduleId: 'helloWorld/index',  title: 'Hello World',   type: 'intro' }, 
      { route: 'helloWorld',  moduleId: 'helloWorld/index',  title: 'Hello World',   type: 'intro',  nav: true}, 
      { route: 'clickCounter', moduleId: 'clickCounter/index',  title: 'Click Counter',   type: 'intro',  nav: true}, 
      { route: 'simpleList',  moduleId: 'simpleList/index',  title: 'Simple List',   type: 'intro',  nav: true }, 
      { route: 'betterList',  moduleId: 'betterList/index',  title: 'Better List',   type: 'intro',  nav: true}, 
      { route: 'controlTypes', moduleId: 'controlTypes/index',  title: 'Control Types',   type: 'intro',  nav: true }, 
      { route: 'collections',  moduleId: 'collections/index',  title: 'Collection',   type: 'intro' ,  nav: true }, 
      { route: 'pagedGrid',  moduleId: 'pagedGrid/index',  title: 'Paged Grid',   type: 'intro',  nav: true }, 
      { route: 'animatedTrans', moduleId: 'animatedTrans/index', title: 'Animated Transition', type: 'intro',  nav: true }, 
      { route: 'contactsEditor', moduleId: 'contactsEditor/index', title: 'Contacts Editor',  type: 'detailed', nav: true }, 
      { route: 'gridEditor',  moduleId: 'gridEditor/index',  title: 'Grid Editor',   type: 'detailed', nav: true }, 
      { route: 'shoppingCart', moduleId: 'shoppingCart/index',  title: 'Shopping Cart',   type: 'detailed', nav: true }, 
      { route: 'twitterClient', moduleId: 'twitterClient/index', title: 'Twitter Client',  type: 'detailed', nav: true} 
     ]).buildNavigationModel(); 

    return { 
     router: childRouter, 
     introSamples: ko.computed(function() { 
      return ko.utils.arrayFilter(childRouter.navigationModel(), function(route) { 
       return route.type == 'intro'; 
      }); 
     }), 
     detailedSamples: ko.computed(function() { 
      return ko.utils.arrayFilter(childRouter.navigationModel(), function(route) { 
       return route.type == 'detailed'; 
      }); 
     }) 
    }; 
});

來源

2013-09-27 21:08:13 Excommunicated

這與我想達到的目標非常接近，但有一件事我不明白。視圖組合在這種情況下如何工作？ Durandal知道如何在右側面板而不是主要容器中加載內容？ –

我想我找到了我正在尋找的東西，因爲在Ko樣本的index.html文件中有一些非常有用的東西<！ - ko router：{transition：'entrance'，cacheViews：true} - >。是否讓子視圖在左側面板中加載？ –

你能證實我的悲傷是對的嗎？ –

Durandal嵌套視圖組合

回答

相關問題