在多个视图模型中使用剑道可观察属性

Question

在使用Kendo MVVM框架的Kendo应用程序中：我有一个"全局"视图模型，它是应用程序所有部分通用的信息，例如UserState，它的属性是LoggedIn。

许多不同的Views和ViewModels访问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的值时，它不会更新。运行并单击按钮查看问题-绑定没有反映更新的值(但警报框反映了)。感谢您的帮助。

注：这是前面一个问题的延伸，让我更进一步。

Answer 1

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

您可以通过使userState成为viewModel1的属性来弥补这一问题，从而将其封装在可观察对象中(或者您可以将IIFE中的返回对象封装在可观测对象中)：

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

看看这个演示；试着对userState属性进行注释，您就会看到区别。