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，所以第一个选项是最简单的。

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

1 个答案: