3

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

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>

显然，我需要“直接”路径才能工作，即.. 直接从数据绑定调用子类上的方法。否则我需要为每个子类/成员在主视图模型上创建代理成员......

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

任何帮助表示赞赏，保罗

4

3 回答 3

5

使用带有粗箭头的实例成员（在 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() );
于 2013-09-23T21:40:36.050 回答
2

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

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

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

这是 javascript 版本的小提琴：http: //jsfiddle.net/nilgundag/ySmw3/

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

function MainViewModel() {
    this.a = new subClassA();
    this.incCounterIndirect=function(){
        this.a.incCounter(); // this works....
    };
}
ko.applyBindings(new MainViewModel() );
于 2013-09-23T19:48:24.587 回答
1

与其更改处理程序以使用粗箭头，不如更改绑定方式：

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

这会创建一个新函数，其“this”参数是视图模型，这会导致该方法的行为类似于实例方法。

在这里工作 JSFiddle：http: //jsfiddle.net/Vjknn/

于 2013-09-24T13:40:35.977 回答