在多个viewModel中使用剑道可观察属性 [英] Using a kendo observable property in multiple viewModels

问题描述

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

In a Kendo app using the Kendo MVVM framework: I have a "global" viewModel which is information that is common to all parts of the app - e.g. the UserState, which has a property isLoggedIn.

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

Many different Views and ViewModels access the userState object (from what I can see, 1 View is bound to 1 ViewModel in Kendo).

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

For example, my home page might show the Login button if they are not authenticated. Then all the other screens behave differently once you are logged in, so each ViewModel needs to reference the UserState object. However, if any of them change it then all other Views should update as I used a Kendo Observable object. This does not seem to work.

我在这里设置了一个简单的示例来说明问题: http://jsfiddle.net/rodneyjoyce /uz7ph/11

I set up a simple example here to illustrate the problem: 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的值时，它不会更新.运行并单击按钮以查看问题-绑定未反映更新后的值(但警报框显示了该值).任何帮助表示赞赏，谢谢.

When I call userState.loginUser() to change the value of isLoggedIn in userStateViewModel it does not update. Run and click on the button to see the problem - the binding does not reflect the updated value (but the alert box does). Any help appreciated, thank you.

注意:这是>早期版本的扩展问题使我更进一步.

Note: This is en extension of an earlier question which got me a bit further.

推荐答案

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

The problem is that userState is a simple object, not an ObservableObject. Because of this, the change event of the userStateViewmodel observable does not trigger the change event for viewmodel1 and the view doesn't update.

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

You can remedy this by making userState a property of viewModel1, so it is wrapped in an observable (or you could wrap your return object in the IIFE in an observable):

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

看看这个演示；尝试注释userState属性，您将看到区别.

Take a look at this demo; try commenting the userState property and you'll see the difference.

这篇关于在多个viewModel中使用剑道可观察属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！