Knockout applyBindings錯誤

Question

我有一個使用DurandalJS和KnockoutJS的SPA。在我的初始頁面上，我允許點擊一個項目，然後加載該項目的輔助頁面。這是我進入二級頁面：

var goToDetails = function (selectedDailyLog) { 

     var url = '#/dailylog/' + selectedDailyLog.id(); 

     //durandal/plugins/router is sammy.js 

     router.navigateTo(url); 

    }; 

在次級頁面，我試圖打電話ko.applyBindings，我不斷收到以下錯誤：

未捕獲的錯誤：無法解析綁定。 消息：ReferenceError：路由器未定義; 綁定值：的foreach：router.visibleRoutes

下面是次級頁面的JavaScript：

define(['config', 'durandal/system', 'services/logger', 'services/dataservice'], 
function (config, system, logger, dataservice) { 

    var owners = ko.observableArray(); 
    var selectedOwner = ko.observable(); 
    var dailyLog = ko.observable({ started: 'one' }); 
    var routeCriteria; 

    //#region Internal Methods 
    function activate(routeData) {  

     routeCriteria = routeData; 
     dataservice.getOwners(owners); 

     logger.log('Daily Log Activated with Id: ' + routeData.id.toString(), null, 'dailylog', true); 

     return true; 
    } 

    var vm = { 
     activate: activate, 
     title: 'Daily Log', 
     owners: owners, 
     selectedOwner: selectedOwner, 
     dailyLog:dailyLog 
    }; 
    ko.applyBindings(vm); 
    return vm; 

}）;

在此先感謝您的幫助。

Answer 1

我可能意味着視圖正在尋找路由數據來綁定一些導航鏈接。在發佈的代碼中，您不返回路由對象。

我不知道你的應用程序是如何設置的，但是這是有可能幫助：

define(
[ 
    'config', 
    'durandal/system', 
    'services/logger', 
    'services/dataservice', 
    'durandal/plugins/router' 
], 
function (config, system, logger, dataservice, router) { 

... your code here ... 

var vm = { 
    activate: activate, 
    title: 'Daily Log', 
    owners: owners, 
    selectedOwner: selectedOwner, 
    dailyLog:dailyLog, 
    router: router 
}; 
ko.applyBindings(vm); 
return vm; 

Answer 2

有幾件事情是，在上面的例子中跳出。首先，在Durandal應用程序中，沒有理由自行撥打ko.applyBindings(vm)，因爲這是由Durandal的composition system涵蓋的。 其次activate函數返回true，如果dataservice.getOwners(owners)是一個同步操作，則允許這是允許的，否則您必須確保您返回promise。

讓我們來看看當ko.applybinding（vm）運行併產生錯誤消息時會發生什麼。當沒有第二個參數運行ko.applyBinding時，它會嘗試將vm綁定到整個DOM上。這與第一次出現的沒有在vm中定義的屬性相沖突。例如默認的初學者模板在shell.html或nav.html中有一個導航部分，例如https://github.com/dFiddle/dFiddle-1.2/blob/gh-pages/App/samples/shell.html#L4

<div> 
    <div class="navbar navbar-fixed-top"> 
     <div class="navbar-inner"> 
      <a class="brand" data-bind="attr: { href: router.visibleRoutes()[0].hash }"> 
       <i class="icon-home"></i> 
       <span>Durandal</span> 
      </a> 

在該示例中返回的VM不具有限定的路由器因此係統產生錯誤。

var vm = { 
    activate: activate, 
    title: 'Daily Log', 
    owners: owners, 
    selectedOwner: selectedOwner, 
    dailyLog:dailyLog 
}; 
// ko.applyBindings(vm); // Do NOT call applyBinding in a Durandal app 
return vm; 

但上面說你只是看到不應該被擺在首位打了一個電話的症狀。 您可能需要查看https://github.com/RainerAtSpirit/Durandal-Fiddle或https://github.com/johnpapa/PluralsightSpaJumpStartFinal等樣本，以瞭解有關Durandal建築原理的更多信息。