Knockout.js 如何使用typescript和knockout调用对象实例方法

我正试图用Typescript和knockout做一些简单的事情，但无法让它工作。随着我的typescipt代码库的增长，我的viewmodels似乎也在增长，需要在主类和子类中很好地建模。Typescript非常适合它！与淘汰赛相结合，我遇到了一个恼人的问题/错误/情况。。。。感谢任何帮助！！！下面是一些类型脚本代码：

class subClassA {
  counter  =0;
  incCounter(){
    this.counter++;
    console.log("counter incs: "+this.counter);
  }
}

class MainViewModel {
  a = new subClassA();


  constructor(){
    this.a.incCounter(); // this works...
  }
  incCounterIndirect(){
    this.a.incCounter(); // this works....
  }
}
ko.applyBindings(new MainViewModel() );

HTML:

Indirect确实有效
直接不起作用

显然，我需要“直接”的上班路线，即。。直接从数据绑定调用子类上的方法。否则，我需要在mainviewmodel上为每个子类/成员创建代理成员

哪个绑定前缀或任何其他技巧可以从单击处理程序调用对象A的成员

感谢您的帮助，

---

Paul

我不熟悉打字脚本，但我认为答案应该与此类似：

class subClassA {
  counter  =0;
  self = this;
  incCounter(){
    self.counter++;
    console.log("counter incs: "+self.counter);
  }
}

问题在于“this”关键字。它在两个不同的版本中获得不同的值。为了确保它始终具有相同的值，您可以在self变量中捕获该关键字的值并使用它

下面是javascript版本的fiddle：

---

使用带有胖箭头的实例成员（在TS 0.9.x中介绍）来克服原型成员的范围界定问题：

class subClassA {
  counter=0;
  incCounter= ()=>{  // Notice difference
    this.counter++;
    console.log("counter incs: "+this.counter);
  }
}

class MainViewModel {
  a = new subClassA();


  constructor(){
    this.a.incCounter(); 
  }
  incCounterIndirect= ()=>{    // Notice difference
    this.a.incCounter(); 
  }
}
ko.applyBindings(new MainViewModel() );

---

您可以只更改绑定方式，而不必更改处理程序以使用fat箭头：

<a data-bind="click: $root.a.incCounterIndirect.bind($root.a)">This will work</a>

---

你能更具体一点吗？那么你说的“有用”和“不有用”是什么意思？预期的输出应该是什么？nemesv，从click evt处理程序中，我希望能够直接调用子类上的incCounter方法，而不是使用主viewmodel.Thanx上的代理方法进行输入。我试着用打字机把它打印出来。self=这个；（作品），self.counter++；（不起作用）我明白了。这个链接可能会有所帮助：这个例子确实说明了问题所在，但并没有真正提出一个优雅的解决方案。简单的事情正变得如此复杂。。。就是这样！！！一百万塔克斯。尼尔冈达格也在向同一个方向发表评论，我只是不知道如何用打字稿来表达。无论如何谢谢你的帮助！！！！犹大，如果可以避免更换操控者，那就太好了。然而，你给出的例子，IMHO，并没有太大改变。。。您的代码片段的作用与：Indirect dos workSorry相同，我刚刚注意到您试图在$root.a上调用它。我已经用一个工作示例和fiddle更新了上面的代码。。。这确实解决了问题，而不改变处理程序的实现。。。美好的我必须弄清楚我更喜欢哪种解决方案……就我个人而言，我更喜欢避免弄乱代码，而只是改变绑定调用处理程序的方式。但是，你可以自由选择你喜欢的。
class subClassA {
  counter=0;
  incCounter= ()=>{  // Notice difference
    this.counter++;
    console.log("counter incs: "+this.counter);
  }
}

class MainViewModel {
  a = new subClassA();


  constructor(){
    this.a.incCounter(); 
  }
  incCounterIndirect= ()=>{    // Notice difference
    this.a.incCounter(); 
  }
}
ko.applyBindings(new MainViewModel() );

<a data-bind="click: $root.a.incCounterIndirect.bind($root.a)">This will work</a>