Durandal : ViewModel이 공통 뷰에서 작동하지 않습니다.

Question

쉘 페이지에서 내비게이션/메뉴 (수직)를위한 공통 영역을 생성하려고합니다. 이 셸의 메뉴 영역은 모든 페이지 전환시 새로운 메뉴 집합으로 업데이트됩니다. 을 heres URL '#/리포트 /리스트 2'내가이 뷰 모델 (list2.js)를 가지고가는 내 shell.js

define(function (require) { 
var router = require('durandal/plugins/router'); 
var Menu = function (name, children) { 
    this.name = ko.observable(name); 
    this.children = ko.observableArray(children); 
} 

var Menus = ko.observableArray([]); 

function GetDSRList() { 
    router.navigateTo('#/reports/list2'); 
} 

function activate() { 


    router.mapNav('reports/index', 'viewmodels/reports/index', 'Reports'); 
    router.mapNav('reports/list', 'viewmodels/reports/list', 'List'); 
    router.mapNav('reports/list2', 'viewmodels/reports/list2', 'List2'); 
    router.mapNav('home/menu', 'viewmodels/home/menu', 'Main'); 
    return router.activate('home/menu'); 
} 

function viewAttached() { 
    $(document).ready(function() { 
     $("#panelbar").kendoPanelBar({ 
      expandMode: "single" 
     }), 

     $("#splitter").kendoSplitter({ 
      panes: [ 
        { collapsible: false, resizable: false, size: "20%" }, 
        { collapsible: false } 
        ] 
     }); 
    }); 
} 

function token() { 
    return $("input[name='__RequestVerificationToken']").val(); 
} 

var shell = { 
    router: router, 
    activate: activate, 
    viewAttached: viewAttached, 
    GetDSRList: GetDSRList, 
    Menus: Menus, 
    token: token, 
    Menu: Menu 
} 

return shell; 

그리고보기 (shell.html)에 대한 다음

<div style="height:100%;"> 
    <div class="loader" data-bind="css: { active: router.isNavigating }"> 

    </div>  

    <div id="splitter" style="border:0;height:100%"> 

      <div class="nav-panel-section"> 
       <ul id="panelbar"> 

        <li data-bind="foreach : Menus"> 
         <span class="k-link k-header" data-bind="text: name"> 
          <span class="k-icon k-i-arrow-s k-panelbar-expand"></span> 
         </span> 
          <ul data-bind="foreach: children"> 
           <li> 
            <span class="k-link" data-bind="text: $data,click:this.GetDSRList"></span> 
           </li> 
          </ul> 
        </li> 


       </ul> 
      </div> 


      <a href="#/reports/list2">Log off</a> 
      <div id ="partialContent"> 

        <div class="container-fluid page-host"> 
         <!--ko compose: { 
          model: router.activeItem, //wiring the router 
          afterCompose: router.afterCompose, //wiring the router   
          cacheViews:true //telling composition to keep views in the dom, and reuse them (only a good idea with singleton view models) 
         }--><!--/ko--> 

         <form method="post" action="Account/LogOff" id="logoutForm" > 
          <input type="hidden" name="__RequestVerificationToken" data-bind="value:token"/> 
         </form> 
        </div> 

      </div> 
    </div>   
</div> 

내부 :

define(function (require) { 

var shell = require('viewmodels/home/shell') 


function activate() { 
    shell.Menus = []; 
    shell.Menus = [ 
       new shell.Menu("Menu3", ["A", "B", "C"]), 
       new shell.Menu("Menu5", ["A", "B", "C"]) 
      ]; 
} 

var list2 = { 
    activate : activate 
} 

return list2; 

}); 

하지만 전체 페이지를 새로 고치지 않으면 쉘의 메뉴 UI가 변경되지 않습니다. 내가 여기서 뭔가를 놓치고 있니? Thnx

Answer 1

문제는 observableArray를 만든 다음 새 뷰 모델로드에서 제거하는 것입니다. 당신은 당신의 observableArray이는 DOM에 연결의 유지하는 세터 기능을 사용합니다 (하나에 내 문법을 수정하지 마십시오 키스 시도!)

function activate() { 
    shell.Menus = ([]); 
    shell.Menus = ([ 
       new shell.Menu("Menu3", ["A", "B", "C"]), 
       new shell.Menu("Menu5", ["A", "B", "C"]) 
      ]); 
} 

간단하게 문제를 해결해야 parans 추가 . 개간 할 때 parans를 사용할 때 parans를 사용하십시오.