knockout.js - Knockout js“IF”绑定到接收参数并返回布尔值的函数

Question

我希望能够根据一组角色名称显示或隐藏某些 DOM 元素。问题是我想检查 html 中的一个或多个角色。

就像是：

<div data-bind="if: isInRole('Admin', 'Editor')">

或者

<div data-bind="if: isInRole(['Admin', 'Editor'])">

上述解决方案似乎对我不起作用。有什么建议/替代方案吗？

Answer 1

@nemesv 的评论很到位：您的代码中可能存在错误或问题，而您没有在问题中显示。尽管如此，这里的设置可以帮助您找到并修复您遇到的错误。

您的方法签名IsInRole与输入参数不一致，输入参数是一组角色。如果您将其更改为IsInAnyRole事情可能会变得更清晰，那么这样的事情应该可以正常工作：

<div data-bind="if: isInAnyRole(['admin', 'editor'])">Protected div!</div>

使用以下视图模型：

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

    self.roles = ko.observableArray(["editor", "user"]);

    self.isInAnyRole = function(targetRoles) {
        return targetRoles.some(function(el) { return self.roles().indexOf(el) !== -1; });
    }
};

您可以查看此小提琴以获取上述演示。如果您将视图模型的角色更改为“编辑器”或“管理员”以外的角色，则该消息将消失。