knockout.js - español - knockout js tutorial

¿Por qué en ejemplos knockout.js es el modelo de vista alguna vez definido como una función y otras veces una definición de variable directa?

Question

Estoy tratando de entender cuál es la mejor práctica para definir y organizar mis modelos de vista js con knockout. No soy genio, entonces ...

Ok, entonces en muchos de los ejemplos, viewModel se define como:

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

la otra forma es crear una especie de constructor:

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

Mi instinto fue crear mis viewModels como función / clases, pero descubrí que al definir funciones dentro de cosas como ajax calls, etc., no podía actualizar las variables de viewModel dentro de las definiciones de funciones. Primero tengo que definir viewModel y luego "agregar" las funciones después?

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

 }  

En lo anterior, la función de inicio de sesión no puede actualizar las variables userNameExists o passwordCorrect. Intenté un montón de sintaxis diferente. Cuando muevo esta función fuera del constructor funciona bien ...

Simplemente no entiendo cuál sería el propósito de crear el tipo de constructor de funciones si ninguna de las funciones miembro puede existir dentro de él. ¿Qué me estoy perdiendo? ¡Gracias!

Answer 1

Su problema es probable el valor de this en su devolución de llamada. Hay un par de formas de hacer que esto funcione:

$ .ajax acepta un parámetro de context , por lo que podría agregar context: this en sus opciones que se le pasan.

También puede establecer esto en una variable dentro de this.login y usar la variable en su resultado. Sería como:

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

O puede vincular su función de éxito a this , lo que asegurará que se llame a la función con el valor correcto para this . Debería ser como

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

Como está utilizando $ .ajax, la primera opción es la más fácil.