javascript - kendo template mvvm

Uso de una propiedad observable de kendo en viewModels múltiples

Question

En una aplicación de Kendo que utiliza el marco MVVM de Kendo: Tengo un modelo de vista "global" que es información que es común a todas las partes de la aplicación, por ejemplo, el UserState, que tiene una propiedad isLoggedIn.

Muchas vistas diferentes y modelos de vista acceden al objeto userState (por lo que puedo ver, 1 vista está vinculada a 1 ViewModel en Kendo).

Por ejemplo, mi página de inicio puede mostrar el botón de inicio de sesión si no están autenticados. Luego, todas las otras pantallas se comportan de manera diferente una vez que haya iniciado sesión, por lo que cada ViewModel necesita hacer referencia al objeto UserState. Sin embargo, si alguno de ellos lo cambia, todas las demás Vistas deberían actualizarse, ya que utilicé un objeto observable de Kendo. Parece que esto no funciona.

Configuré un ejemplo simple aquí para ilustrar el problema: http://jsfiddle.net/rodneyjoyce/uz7ph/11

var app = new kendo.mobile.Application();   

userState = (function ()
{
    var userStateViewModel = kendo.observable({
                                                  isLoggedIn: false
                                              });    
    function loginUser()
    {
        userStateViewModel.set("isLoggedIn", true);
        alert(''Logged in'');
    };

    return {            
        userStateViewModel: userStateViewModel,
        loginUser: loginUser
    }
})();

var viewModel1 = kendo.observable({
    label: ''ViewModel1'',
    isLoggedInVM1: function() {
        return userState.userStateViewModel.get("isLoggedIn");
    },
    logIn: function ()
    {
        //when calling LoginUser from here, the binding is not updated, even though the value is changed (true)
        userState.loginUser();
        alert(''After Login viewModel1.isLoggedInVM1() = '' + viewModel1.isLoggedInVM1() + '' but the binding has not updated'');
    }  

});

alert(''Value onLoad = '' + viewModel1.isLoggedInVM1());

//If you uncomment this and call LoginUser from here then afterwards the binding changes to true, but not if you call it from within ViewModel1
//userState.loginUser();


kendo.bind($("#testForm"), viewModel1);

Cuando llamo userState.loginUser () para cambiar el valor de isLoggedIn en userStateViewModel, no se actualiza. Ejecute y haga clic en el botón para ver el problema: el enlace no refleja el valor actualizado (pero sí el cuadro de alerta). Cualquier ayuda apreciada, gracias.

Nota: Esto es una extensión de una pregunta anterior que me llevó un poco más allá.

Answer 1

El problema es que userState es un objeto simple, no un ObservableObject . Debido a esto, el evento change del userStateViewmodel observable no desencadena el evento change para viewmodel1 y la vista no se actualiza.

Puede remediar esto al hacer que userState una propiedad de viewModel1 , por lo que está envuelto en un elemento observable (o podría envolver su objeto de retorno en el IIFE de forma observable):

var viewModel1 = kendo.observable({
    label: ''ViewModel1'',
    userState: userState,
    isLoggedInVM1: function() {
        return userState.userStateViewModel.get("isLoggedIn");
    },
    logIn: function ()
    {
        userState.loginUser();
    }          
});

Echa un vistazo a esta demostración ; intente comentar la propiedad userState y verá la diferencia.