2016-11-29 123 views
1

我試圖強制更新從viewmodel到UI的計算屬性更新。不過,我只是得到初始值,沒有任何進一步的值。突變屬性失敗,因爲它不是一個函數。觸發器計算的屬性更新

網站

<script src="../../libraries/knockout-3.4.1.js"></script> 
<input id="nameInput" data-bind="value: processName" type="text"/> 
<input id="nodetotalInput" data-bind="value: processNodeCount" type="text"/> 

視圖模型

export class ProcessViewModel { 
    public processName: KnockoutObservable<string>; 
    public processNodeCount: KnockoutObservable<number>; 

    constructor() { 
     try { 
      this.testService = new Test.TestService(); 

      this.setBindings(); 
     } 
     catch (e) { 
      console.log(e); 
     } 
    } 

    public setBindings(): void { 
     this.processName = ko.computed<string>(
      function() { processViewModel.isLoaded() ? processViewModel.testService.flowModel.process.name : ""; } 
     ); 
     this.processNodeCount = ko.computed<number>(
      function() { processViewModel.isLoaded() ? processViewModel.testModel.nodeCount() : 0; } 
     ); 
    } 

    public isLoaded(): boolean { 
     return this.testService.isLoaded(); 
    } 

    public refreshProcessDetails() { 
     try { 
      let message: string = "IsLoaded" + this.isLoaded(); 
      console.log(message); 

      /** attempts at triggering an update */ 
      this.processName(); 
      this.processName.valueHasMutated(); // fails because it's not a function 

      this.processNodeCount(); 
     } 
     catch (e) { 
      console.log(e); 
     } 
    } 
} 

綁定

declare var processViewModel: Process.ProcessViewModel; 

window.onload =() => { 
    processViewModel = new Process.ProcessViewModel(); 
    processViewModel.setBindings(); 
    ko.applyBindings(processViewModel); 
} 

我打電話從this.refreshProcessDetails this.processName.valueHasMutated()()時,遇到下列錯誤;

棧:「類型錯誤:this.processName.valueHasMutated不在

+1

你的TestService沒有提供任何你可以訂閱的事件嗎?傾聽「負載」事件將更適合淘汰賽的完全事件驅動方法。像'refreshProcessDetails'一樣創建輪詢函數將導致非理想的結果。 – Tomalak

回答

3

valueHasMutated功能\ n是隻有正常觀測有一個方法計算觀測沒有這個方法這是主要是因爲沒有按valueHasMutated」。 t不會觸發你調用它的observable中的更新,而是觸發訂閱observables中的下游更新,所以它不會幫助你在這裏。在這種情況下,如果這樣做,它會告訴HTML綁定更新,但不會改變值processName,所以綁定不會做任何事情。

通常沒有w ay觸發一個計算可觀測值的更新,除了改變它所依賴的可觀測值外。相反,你的計算機observable應該依賴另一個observable(最好),或者你應該自己手動寫一個observable(如果你必須的話)。要做到這一點:

  1. 如果你能,使processViewModel.testService.flowModel.process.name這是改變的一部分(如進程名,或過程本身,如果這就是正在改變等)可觀察到的,這樣計算時將被自動更新它確實如此。
  2. 或者,根本沒有計算。將processName和processNodeCount留作正常的可觀察對象,並在調用refreshProcessDetails時,將正確的值寫入它們中。

計算機存在自動保持您的數據模型始終保持同步。你必須要麼承諾(自始至終使用觀測值),要麼自己動手(手動更新正常觀測值),你不能停留在中間。

請注意,如果您執行選項2,您會失去很多(全部?)Knockout的值。 Knockout的「正確」方法是保持應用程序的大部分(這裏的字段以及這些模型中依賴的字段)可觀察,以便所有事情都可以神奇地工作。你的代碼中使用Knockout的部分越大,效果越好 - 縮小意味着更多的Knockout寧願爲你做的手動工作。

+0

謝謝,我不得不想一想。選項2會更可取,但需要進行相當多的更改,因爲屬性來自DTO模型。 – wonea