javascript - Knockout.js:在原型(prototype)上调用函数，但保留在 foreach 的上下文中

Question

我正在尝试使用 knockout.js 创建一个基本的 Tic-Tac-Toe 游戏。我还使用jade作为预处理器；如果您对此感到困惑，请告诉我，但它应该非常简单。

因此，我需要在 HTML 中的 foreach 数据绑定(bind)中对对象使用函数，但我还需要访问 viewModel 中的其他对象。我不太确定该怎么做。如果我将它放在 foreach 中的对象上，我可以访问该函数，但是我无法访问该对象之外的对象。

所以我的问题是:如何从 foreach 上下文中调用可以访问 viewModel 上所有内容的函数？

这是我的代码:

HTML

table.bg-success(style="table-layout:fixed;")
  tr#row1(data-bind="foreach:topRow")

    td(data-bind="text:symbol,click:function(){$parent.PlayerTurn.bind($root)();$root.changeSymbol()}")

  tr#row2(data-bind="foreach:middleRow")
    td(data-bind="text:symbol,click:function(){$parent.PlayerTurn.bind($root)();$root.changeSymbol()}") 

  tr#row3(data-bind="foreach:bottomRow")
    td(data-bind="text:symbol,click:function(){$parent.PlayerTurn.bind($root)();$root.changeSymbol()}")

JavaScript

var aBox = (function(position){
  function ABox(){
    this.symbol = ko.observable("");
    this.position = position
    this.count = 0;

  }

  return ABox;
})()

var viewModel = (function(){
  function ViewModel(){
    this.theMessage = new message();
    this.thePlayers = new players();
    this.topRow = ko.observableArray([
      new aBox("r1c1"),
      new aBox("r1c2"),
      new aBox("r1c3"),     
    ]);
    this.middleRow = ko.observableArray([
      new aBox("r2c1"),
      new aBox("r2c2"),
      new aBox("r2c3"),
    ]);
    this.bottomRow = ko.observableArray([
      new aBox("r3c1"),
      new aBox("r3c2"),
      new aBox("r3c3"),
    ]);     
  }

    ViewModel.prototype.changeSymbol = function(){
      this.count+=1;
      if(this.count%2==0){
      this.symbol("O");
      }else{
        this.symbol("X")
      }
    }    

  return ViewModel;
})()

ko.applyBindings(new viewModel())

Answer 1

养成将所有逻辑放在 View 模型/JavaScript 中而不是 View 中的习惯。另外，请通读the click binding handler documentation它实际上回答了您的大部分问题，并且只需简短阅读即可。

基本上是这样的:

td(data-bind="text:symbol, click: $root.changeSymbol") 

然后你就可以在$root上使用这个函数:

var self = this;
self.changeSymbol = function(childVm) {
  console.log(self); // is the $root
  console.log(childVm); // the item from the foreach
}

如果您需要访问“子”和“根”之间的元素(即中间有一个 $parent)，您应该:

• 将 changeSymbol 函数移至 $parent 并确保父 View 模型具有对其父级的引用(如果您需要使用该函数)函数内部；或
• 在子虚拟机上放置父级的属性，以便该函数可以调用 childVm.parent 来访问该 View 模型。

作为脚注，如果您绝对必须，您可以这样做:

td(data-bind="text:symbol, click: function() { $root.changeSymbol($root, $parent, $data); }") 

但这可能意味着您遇到了 XY 问题，并且您的 View 模型的结构不符合应有的方式。