查看不更新Durandal/Knockout SPA中的綁定

我正在用默認的Durandal設置構建SPA應用程序。我有多個視圖用ajax調用返回數據，但它並不完美。我用搜索框創建了我的shell頁面，這樣我就可以搜索這裏顯示的員工列表。查看不更新Durandal/Knockout SPA中的綁定

Shell.js

define(['require', 'durandal/plugins/router', 'durandal/app', 'config'], 
function (require, router, app, config) { 

var shell = { 
    router: router, 
    searchData: searchData, 
    employees: ko.observable(), 
    search: search, 
    activate: activate, 
}; 

var searchData = ko.observable(''); 

function search(searchData) { 
    var url = '#/employeeSearch/' + searchData.searchData; 
    router.navigateTo(url); 
} 

return shell; 

function activate() { 

    router.map(config.routes); 
    return router.activate(config.startModule); 
}

}）;

shell.html

<div class="input-group"> 
      <input type="text" class="form-control" placeholder="Search Employees" data-bind="value: searchData" /> 
      <span class="input-group-btn"> 
       <button type="submit" class="btn btn-default" data-bind="click: search">Search</button> 
      </span> 
     </div>

的用戶將在搜索，當他們點擊搜索按鈕下方的視圖導航到employeeSearch頁面。這確實有用，並將我需要的數據和視圖返回到此處。

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

    var goBack = function() { 
     router.navigateBack(); 
    }; 

    function details(employee) { 
     var url = '#/employee/' + employee.Id + '/profile'; 
     router.navigateTo(url); 
    } 

    var vm = { 
     goBack: goBack, 
     employees: ko.observable(), 
     details: details, 
    }; 

    return { 
     activate: function (route) { 
      var self = this; 
      return self.getEmployees(route.q); 
     }, 
     getEmployees: function (query) { 
      return $.ajax(app.url('/employees?q=' + query), 
      { 
       type: "GET", 
       contentType: 'application/json', 
       dataType: 'json', 
      }).then(querySucceeded).promise; 

      function querySucceeded(result) { 
       self.employees = result; 
       logger.log(query + ' Search Activated!', null, 'employeeSearch', true); 
      } 
     }, 
    }; 
});

那麼，如果我嘗試尋找另外一個名字，該URL將導航，記錄儀會顯示我搜索的值，但視圖本身不會顯示新的結果。在Chrome調試器中探索，我查看僱員對象以包含新的結果集，但視圖仍未更新。 但是，如果我刷新頁面，視圖確實顯示了我已經在這裏查看了關於在激活方法中保留數據調用的類似問題的多個問題，確保數據在完成激活方法之前返回承諾，在viewAttached中的DOM操作。 Javascript is not rendering in my SPA How to use observables in Durandal? HotTowel: Viewmodel lose mapping when navigating between pages

把這些做法在我的代碼後，我仍然有越來越視圖，以正確更新的問題。

是否還有其他Durandal/Knockout屬性需要注意？我怎樣才能獲得綁定更新，每次我瀏覽一個視圖（router.navigateTo（url）;）。我已將我的shell屬性（cacheViews：true）設置爲true和false，但似乎沒有任何更改。

這是我用Durandal構建SPA應用程序時遇到的許多問題之一。試着不放棄。

來源

2013-08-28 jcc

我能夠解決這個問題，使用在這裏看到的Q承諾庫，http://durandaljs.com/documentation/Q/ – jcc

我不知道這是否會有所幫助，因爲看起來你已經解決了你的問題問題，但我注意到你可能想嘗試設置var self = this;在你的getEmployees函數的第一行。 – levi

我不能測試這個快速，但一想到你處理可觀察的錯誤。

我懷疑「結果」var是一組僱員。在這種情況下，你可能會與observableArray（http://knockoutjs.com/examples/collections.html）

處理這一點，你付出更多的價值直接設置像self.employees 必須調用觀察到的功能設定像

function querySucceeded(result) { 
       self.employees(result) 
       logger.log(query + ' Search Activated!', null, 'employeeSearch', true); 
      }

來源

2013-08-28 16:37:55

你知道嗎，我最初是這麼開始的。但是，當我執行搜索時收到此錯誤，Uncaught TypeError：Object [object global]沒有方法'employees'。它只適用於當我設置'='的值，根據敲除文檔和適當的約定，不是肯定的，沒有意義 – jcc

好吧，但你定義的員工在VM對象，而不是在視圖。訪問虛擬機對象。這可能是工作。或者在視圖中聲明僱員直接返回僱員：ko.observable（）， activate：function（route）{ var self = this; return self.getEmployees（route.q）; }， –

您只能在html視圖中訪問其在require-module的返回對象中的變量，這是值得注意的。 –

在你的樣品值你沒有顯示/提到淘汰賽正在加載。如果您使用的是Durandal 2.0，則將以下行添加到您的現有定義語句上方的main.js文件的頂部

define（'knockout'，ko）;

來源

2013-10-17 04:50:21 shai

查看不更新Durandal/Knockout SPA中的綁定

回答

相關問題