なぜknockout.jsの例は、時々関数として定義されたviewmodelであり、他の変数は直接変数定義ですか？

Question

ノックアウトでjsビューモデルを定義し整理するためのベストプラクティスを理解しようとしています。他の方法は、コンストラクタのようなものを作成することです

var viewModel = { 
    firstName: ko.observable("Bert"), 
    lastName: ko.observable("Bertington"), 

    capitalizeLastName: function() { 
     var currentVal = this.lastName();  // Read the current value 
     this.lastName(currentVal.toUpperCase()); // Write back a modified value 
    } 
}; 

：私は...そうViewModelには次のように定義されている例の多くでそう

[OK]をjsの天才ではないよ

function viewModel() { 
    this.firstName = ko.observable("Bert"); 
    this.lastName = ko.observable("Bertington"); etc............. 

私の本能は、私のviewModelsを関数/クラスとして作成することでしたが、ajax呼び出しなどのために関数を内部に定義すると、関数定義内のviewModel変数を更新できませんでした。最初にviewModelを定義し、その後に関数を追加する必要がありますか？ログイン機能上userNameExistsまたはpasswordCorrect変数を更新することはできませんで

function LogOnModel() { 
    this.userName = ko.observable(""); 
    this.password = ko.observable(""); 
    this.userNameExists = ko.observable(true); 
    this.passwordCorrect = ko.observable(true); 
    this.returnURL = ko.observable(document.location.href.replace("http://" + location.host,"")); 
    this.login = function() { 
     $.ajax({ 
      type: 'POST', 
      contentType: 'application/json; charset=utf-8', 
      data: ko.toJSON(this), 
      dataType: 'json', 
      url: 'Account/LogOn', 
      success: function (result) { 
       this.userNameExists(result["UserNameExists"]); 
       this.passwordCorrect(result["PasswordCorrect"]); 
       alert(userLogOnModel.userNameExists); 
      } 
     }); 
    this.loginFormFilled = ko.dependentObservable(function() { 
     if ((this.userName() != "") && (this.password() != "")) 
      return true; 
     else 
      return false; 
    }, this); 

} 

..私は異なる構文の束を試してみました。この関数をコンストラクタから移動すると、正常に動作します。

内部にメンバー関数が存在しない場合、関数コンストラクタのソートを作成する目的は何か分かりません。私は何が欠けていますか？ありがとう！

Answer 1

あなたの問題は、コールバックにthisと表示されている可能性があります。

$ .ajaxはcontextパラメータを受け入れるので、渡されるオプションにcontext: thisを追加することができます。

this.login内の変数にこれを設定し、その結果で変数を使用することもできます。それは次のようになります：

this.login = function() { 
    var that = this; 
    .... 
    success: function (result) { 
       that.userNameExists(result["UserNameExists"]); 
       that.passwordCorrect(result["PasswordCorrect"]); 
      } 
} 

それとも、関数がthisの正しい値で呼び出されることを保証するであろう、thisにあなたの成功の機能を結合することができます。それは同じようになります

success: function (result) { 
       this.userNameExists(result["UserNameExists"]); 
       this.passwordCorrect(result["PasswordCorrect"]); 
       alert(userLogOnModel.userNameExists); 
      }.bind(this) 

あなたは$ .ajaxを使用しているので、最初のオプションが最も簡単です。