Question

想象一下以下场景。我有一个复选框，用户可以根据他们是否希望看到每个人，或者只是那些管理人员来检查列表。这是简化的代码：

<input type="checkbox" id="manager-view-toggle" data-bind="checked: onlyViewManagers" />
<ul data-bind="foreach: persons">
    <li data-bind="visible: isManager() || !$parent.onlyViewManagers() , text: name"></li>
</ul>

当没有人可见时，我如何向用户显示消息？我不能简单地检查一下人的长度，因为它可能高于0但是列表中可能没有经理。

我考虑过使用afterRender，但只有在列表内容发生变化时才会触发（似乎）。

基本上，如果没有人被渲染，我想要一点点<li>说“没有人在这里”。

Answer 1

您也可以将虚拟元素与foreach绑定一起使用：

<ul>
    <!-- ko foreach: persons -->
        <li data-bind="text: name"></li>
    <!-- /ko -->
    <!-- ko if: persons().length == 0 -->
        <li>No people here</li>
    <!-- /ko -->
</ul>

您可以扩展模型，以便人员只是要显示的人员列表，请查看filtering an observable array示例。

Answer 2

我想到的一个解决方案是：

<!-- ko if: emptyList(persons()) -->
<ul>
    <li>No people here bro</li>
</ul>
<!-- /ko -->
<ul data-bind="foreach: persons">
    <li data-bind="visible: isManager() || !$parent.onlyViewManagers() , text: name"></li>
</ul>

这是我上面示例的视图模型

function viewModel() {
    var self = this;

    this.onlyViewManagers = ko.observable(false);

    this.persons = ko.observableArray([]);

    this.emptyList = function(arrayToCheck) {
        return ko.utils.arrayFirst(arrayToCheck, function(item) {
            return item.isManager() || self.onlyViewManagers();
        }) === null
    };
}

但这似乎是违反直觉的，除了重复相同的逻辑以确定是否可以使项目可见。

使用可见绑定时，如何在看不到任何内容时显示消息

2 个答案: