Question

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

许多不同的View和ViewModel访问userState对象（从我所看到的，1 View绑定到Kendo中的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的扩展，这让我更进一步。

Answer 1

问题是userState是一个简单的对象，而不是ObservableObject。因此，userStateViewmodel observable的更改事件不会触发viewmodel1的更改事件，并且视图不会更新。

你可以通过使userState成为viewModel1的属性来解决这个问题，因此它被包装在一个observable中（或者你可以将你的返回对象包装在一个可观察的IIFE中）：

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

看看这个demo;尝试评论userState属性，您会看到差异。

在多个viewModels中使用kendo observable属性

1 个答案: