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

Question

我正在尝试使用Typescript和knockout做一些简单的事情,但是无法让它工作.随着我的typescipt代码库的增长,似乎我的视图模型正在增长,需要在主类和子类中进行很好的建模.打字稿非常适合它!结合淘汰赛我遇到了烦人的问题/错误/情况......任何帮助表示赞赏!!! 这是一些打字稿代码:

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:

<a data-bind="click: $root.incCounterIndirect ">Indirect does work</a>
<a data-bind="click: $root.a.incCounter ">Direct does NOT work</a>

显然我需要'直接'路由才能工作,即直接从data-bind调用子类上的方法.否则我需要在mainviewmodel上为每个子类/成员创建代理成员...

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

任何帮助表示赞赏,保罗

Answer 1

使用具有胖箭头的实例成员(在TS 0.9.x中引入)来克服this原型成员的范围问题:

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() );