Question

我有一个菜单栏，如果用户经过身份验证，我只想看到div。我的javascript文件包含以下代码：

var UserViewModel = function () {
    var self = this;

    self.Name = ko.observable("");
    self.IsAuthenticated = ko.observable(false);

    self.SignOut = function () {
        var uri = '/api/User/Logout'
        $.getJSON({ url: uri, contentType: "application/json" })
            .done(function () {
                window.location.href = "/Pages/Index";
            });

    }

}


$(document).ready(function () {

    var vm = {
        loginVm : new LoginViewModel(),
        registerVm: new RegisterViewModel(),
        userVm: new UserViewModel()
    }


    var uri = '/api/User/Get'
    $.getJSON({ url: uri, contentType: "application/json" })
        .done(function (data) {
            vm.userVm.Name(data.Name);
            vm.userVm.IsAuthenticated(data.IsAuthenticated);
        });

    ko.applyBindings(vm, $('#LayoutSection')[0]);
    GetTimezones();
});

因此，当屏幕加载时，它会调用“/ api / User / Get”并获取用户对象，然后使用Name填充视图模型，如果用户已通过身份验证。

该视图模型虽然有两个其他视图模型，但已分配给主视图模型。

在我的html中，我尝试将数据绑定到该视图模型的'IsAuthenticated'属性以提高可见性。

data-bind="visible: userVm.IsAuthenticated"

但它似乎无法看到userVm.IsAuthenticated。

如何访问该属性？

Answer 1

通常，问题在于，在数据绑定时，您处于不同的绑定上下文中。但是，如果没有看到更多的视图（HTML），很难说。

您可以使用$parent，$parents或$root来处理绑定上下文树。在您的情况下，从任何绑定上下文，您可以使用$root来引用vm。你会这样写：

data-bind="visible: $root.userVm.IsAuthenticated"

访问主视图模型的子vm

1 个答案: