1

データバインディングに役立つノックアウト.jsライブラリを使用しています。そのため、変数がviewModelプロトタイプにある計算関数内で定義されていないというエラーが発生し続けます。これは、計算された関数が「this」のコンテキストをウィンドウに変更しているためであることはわかっていますが、ルート（viewModel）に戻す方法がわかりません。参照しているメソッドはJavaScript の「メッセージ」。そうは言っても、コンテキストをviewModelに戻すにはどうすればよいですか?

これが私のコードです：

HTML

p#title.col-xs-12.bg-primary.text-center
  | Tic - Tac - Toe!
div.col-xs-3.bg-info
  div.bg-primary.controls
    span
      button.btn.btn-default(data-bind="click:StartMessage.bind($root)")
        | New Game
      p#message.lead(data-bind="text:Messages.bind($root)()")
table.bg-success(style="table-layout:fixed;")
  tr#row1
    td(data-bind="click:Messages.bind($root)")
    td &nbsp
    td &nbsp
  tr#row2
    td &nbsp 
    td &nbsp
    td &nbsp
  tr#row3
    td &nbsp 
    td &nbsp
    td &nbsp

ジャバスクリプト

var message = (function(){
  function Message(){
   this.main = ko.observable(true);
   this.welcome = "Welcome to Tic-Tac-Toe! This is a 2 player game. Click New Game to play!"
   this.turn = ", its your turn."
   this.win = ", you won!"
   this.draw = "It's a draw..."
  }
  return Message;
})()

var players = (function(){
  function Players(){
    this.player1 = ko.observable(true);
    this.player2 = ko.observable(false);
  }
  return Players;
})()

var aBox = (function(){
  function ABox(){
    this.symbol = ko.observable(" ")
  }

  return ABox;
})()

var viewModel = (function(){
  function ViewModel(){
    this.GameMessage = new message();
    this.thePlayers = new players();
    this.r1c1 = new aBox();
    this.r1c2 = new aBox();
    this.r1c3 = new aBox();
    this.r2c1 = new aBox();
    this.r2c2 = new aBox();
    this.r2c3 = new aBox();
    this.r3c1 = new aBox();
    this.r3c2 = new aBox();
    this.r3c3 = new aBox();

  }

/**************************************** 
 ************* Messages *****************
 ****************************************/ 

  ViewModel.prototype.StartMessage = function(){

     this.GameMessage.main(false)
  }

  ViewModel.prototype.Messages = ko.computed(function(){

    if(this.GameMessage.main()){
      return this.GameMessage.welcome;
    }
    else if(this.thePlayers.player1()){
      this.thePlayers.player1(false);
      this.thePlayers.player2(true);
      return "Player 1"+this.GameMessage.turn;

    }
    else if(this.thePlayers.player2())
      this.thePlayers.player1(true);
      this.thePlayers.player2(false);
      return "Player 2"+this.GameMessage.turn;
  },ViewModel)

  return ViewModel;
})()

ko.applyBindings(new viewModel())

コンテキストを、示されているように「viewModel」、$root、および「this」に変更して実験しました。

メソッドが何を達成しようとしているのか疑問に思っている場合は、NEW MESSAGE ボタンをクリックすると、メッセージが表示されます。をクリックする<td>と、前のメッセージの代わりに別のメッセージが表示されます。

4

1 に答える 1

1

ko.computed function には、計算された関数 this を指定したオブジェクトにバインドできるようにする2 番目のパラメーターが含まれます。(舞台裏では単にapplyを使用します)

したがって、プロトタイプで計算済みを定義するときは、計算済みを次thisのようにバインドするだけです。

ViewModel.prototype.Messages = ko.computed(function(){
  // your function code
  }, this);

プロトタイプで作業しているthisときは、関心のあるオブジェクト インスタンスを参照することに注意してください。

于 2016-03-15T10:42:46.653 に答える