Question

我有以下代码（shell对我的应用程序是全局的，不在我的viewmodel中）：

<div data-bind="if: shell.metadata().User().IsRootUser()" class="up-one-level text-center">
        <a data-bind="click: shell.navigateToLandingPage" class="btn btn-admin">@Global.BackToAdmin</a>
</div>

访问shell.metadata（）在if data-bind中工作正常，但是在click data-bind中，我得到了一个shell的空值。我也尝试了一些像

这样的变种

    <div data-bind="if: shell.metadata().User().IsRootUser()" class="up-one-level text-center">
        <a data-bind="click: function() { shell.navigateToLandingPage() }" class="btn btn-admin">@Global.BackToAdmin</a>
</div>

我在Knockout.js网站上看到，我们需要注意“this”的含义，因为它会根据上下文而改变。看起来它与我的问题有关，但我不知道如何修复它（我不想在我的新方法中公开一个方法来从那里访问shell）。

有什么想法吗？

Answer 1

在您的示例中，shell被假定为当前Knockout上下文（在视图模型上）的属性。如果你想在数据绑定中使用全局变量，最好是明确的，例如：

＆＃13;

// Mocking mentioned global variable
window.shell = {
    metadata: function() {
        return {
            User: function() {
                return {
                    IsRootUser: function() { return true; }
                }
            }
        }
    }, 
    navigateToLandingPage: function() {
        alert('navigating!');
    }
};

ko.applyBindings({});

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div data-bind="if: window.shell.metadata().User().IsRootUser()" class="up-one-level text-center">
    <a data-bind="click: window.shell.navigateToLandingPage">@Global.BackToAdmin</a>
</div>

＆＃13;

＆＃13; 所有这些都假设您在浏览器的上下文中运行，window被定义。

或者，您可以将数据绑定的东西包装在函数中，如下所示：

＆＃13;

// Mocking global
window.shell = {
    metadata: function() {
        return {
            User: function() {
                return {
                    IsRootUser: function() { return true; }
                }
            }
        }
    }, 
    navigateToLandingPage: function() {
        alert('navigating!');
    }
};

ko.applyBindings({});

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div data-bind="if: function() { return shell.metadata().User().IsRootUser(); }">
    <a data-bind="click: function() { shell.navigateToLandingPage($data); }">@Global.BackToAdmin</a>
</div>

＆＃13;

KnockoutJS点击绑定无法按预期工作

1 个答案: