Question

我正在尝试实现类似“ifnot”绑定的东西，如下所示：

<div data-bind="ifnot: Categories"><p>No Categories available</p></div>

<div data-bind="template: { name: 'category-template', foreach: Categories }"></div>

<script type="text/html" id="category-template">
     <p data-bind="text: Title"></p>
</script>

<script>
     var self;

     function viewModel() {
          self = this;
          self.Categories = ko.observableArray([]);
     }

     ko.applyBindings(new viewModel());

     var renderCategoryTemplate = function(data) {
          for (var i = 0; i < data.length; i++) {
               self.Categories.push({
                    Title: data[i].Title
               });
          }
     };
</script>

这可能吗？或者有更好的方法吗？

我只能看到“No Categories available”一秒钟。但随后它消失了。有什么建议吗？

Answer 1

是否存在ifnot绑定

是的，有一个ifnot绑定

http://knockoutjs.com/documentation/ifnot-binding.html

从那些文档：

<div data-bind="ifnot: someProperty">...</div>

等同于以下内容：

<div data-bind="if: !someProperty()">...</div>

假设someProperty是可观察的，因此您需要将其作为函数调用以获取当前值。

为什么会闪烁？

你看到的闪烁是因为在你运行淘汰赛脚本并删除之前，dom首先使用该文本进行渲染。为了消除这种情况，您可以使用knockout

设置文本

<div data-bind="ifnot: Categories">
    <p data-bind:"text:'No Categories available'"></p>
</div>

这样，在淘汰赛之前不会显示文字，因为KO需要处理它。您现在也可以将消息拉出来并根据需要使其变量。

Answer 2

如果不等于

，请填写

<div data-bind="if: !Categories()"><p>No Categories available</p></div>

这将评估是否没有类别，然后显示。

修改如果您不希望它闪烁，请执行此操作 -

<div data-bind="text: !Categories() ? 'There are no categories' : ''"></div>

Answer 3

如果我将外部div更改为p标签而不是每个答案都有效：

<p data-bind="ifnot: Categories">
    <p data-bind="text: 'No Categories available'"></p>
</p>

也有效：

<p data-bind="if: !Categories()">
    <p data-bind="text: 'No Categories available'"></p>
</p>

不确定原因

如何否定if绑定？

3 个答案:

是否存在ifnot绑定

为什么会闪烁？