为什么在knockout.js示例中,viewmodel有时定义为函数,有时定义为直接变量定义？

Question

我试图了解用knockout定义和组织我的js viewmodel的最佳实践.我不是天才所以......

好的,在许多示例中,viewModel定义为:

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

另一种方法是创建一种构造函数:

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

我的直觉是将我的viewModels创建为函数/类,但发现在为ajax调用等内部定义函数时,我无法更新函数定义中的viewModel变量.我必须首先定义viewModel然后"添加"后的函数？

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

 }  

在上面的登录功能无法更新userNameExists或passwordCorrect变量..我尝试了一堆不同的语法.当我将这个函数移出构造函数时它工作正常..

我只是不明白如果成员函数中没有一个可以存在,那么创建函数构造函数的目的是什么？我错过了什么？谢谢!

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,第一个选项是最简单的.