javascript - 在多个viewModel中使用剑道可观察属性

在使用Kendo MVVM框架的Kendo应用程序中：我有一个“全局” viewModel，它是应用程序所有部分共有的信息-例如UserState，其属性为isLoggedIn。

许多不同的View和ViewModel访问userState对象（据我所见，在Kendo中1 View绑定到1 ViewModel）。

例如，如果未通过身份验证，我的主页可能会显示“登录”按钮。然后，一旦登录，所有其他屏幕的行为都会有所不同，因此每个ViewModel需要引用UserState对象。但是，如果其中任何一个发生更改，则当我使用Kendo Observable对象时，所有其他视图都应更新。这似乎不起作用。

我在这里设置了一个简单的示例来说明问题：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);

当我调用userState.loginUser（）更改userStateViewModel中的isLoggedIn的值时，它不会更新。运行并单击按钮以查看问题-绑定不反映更新后的值（但警报框会反映出来）。任何帮助表示赞赏，谢谢。

注意：这是earlier question的en扩展，使我更进一步。

最佳答案

问题在于userState是一个简单的对象，而不是ObservableObject。因此，userStateViewmodel可观察对象的change事件不会触发viewmodel1的change事件，并且视图不会更新。

您可以通过将userState设置为viewModel1的属性来对此进行补救，以便将其包装在可观察对象中（或者可以将返回对象包装在IIFE中以可观察对象包装）：

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

看看这个demo;尝试注释userState属性，您将看到区别。

关于javascript - 在多个viewModel中使用剑道可观察属性，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/22161922/