Tại sao trong ví dụ knockout.js là viewmodel đôi khi được định nghĩa là một hàm và lần khác một định nghĩa biến trực tiếp?

Question

Tôi đang cố gắng hiểu thực hành tốt nhất để xác định và tổ chức chế độ xem js của tôi bằng loại trực tiếp là gì. Tôi không phải là thiên tài js như vậy ...

Ok như vậy trong nhiều ví dụ ViewModel được định nghĩa là:

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 
    } 
}; 

cách khác là tạo ra một loại constructor:

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

Bản năng của tôi là tạo ra các khung nhìn của tôi như là các hàm/lớp nhưng thấy rằng khi định nghĩa các hàm bên trong cho những thứ như ajax calls etc, tôi không thể cập nhật các biến viewModel bên trong các định nghĩa hàm. Trước tiên tôi phải xác định viewModel và sau đó "thêm" các chức năng sau?

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

} 

Ở trên, chức năng đăng nhập không thể cập nhật userNameExists hoặc passwordCorrect variables .. Tôi đã thử một loạt các cú pháp khác nhau. Khi tôi di chuyển hàm này ra khỏi hàm khởi tạo, nó hoạt động tốt ..

Tôi chỉ không hiểu mục đích của việc tạo kiểu hàm dựng nếu không có hàm thành viên nào tồn tại bên trong nó? Tôi đang thiếu gì? cảm ơn!

Answer 1

Sự cố của bạn có thể là giá trị this trong cuộc gọi lại của bạn. Có một vài cách để thực hiện công việc này:

$ .ajax chấp nhận thông số context, vì vậy bạn có thể thêm context: this vào các tùy chọn được chuyển cho nó.

Bạn cũng có thể đặt giá trị này thành một biến bên trong this.login và sử dụng biến trong kết quả của bạn. Nó sẽ như thế nào:

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

Hoặc bạn có thể ràng buộc chức năng thành công của bạn để this, mà sẽ đảm bảo rằng các hàm được gọi với giá trị chính xác cho this. Nó wpuld được như

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

Vì bạn đang sử dụng $ .ajax, tùy chọn đầu tiên là dễ nhất.