2016-11-29 90 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