knockout.js - 如何否定 if 绑定？

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>

这可能吗？还是有更好的方法来做到这一点？

我只能看到文本“没有可用的类别”一秒钟。但随后它消失了。有什么建议么？

score 2 · Accepted Answer

是否有 ifnot 绑定

是的，有ifnot绑定

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

从那些文档中：

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

等效于以下内容：

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

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

为什么会闪烁？

您看到的闪烁是因为在您运行剔除脚本并将其删除之前，dom 首先使用该文本呈现。要消除这种情况，您可以使用敲除设置文本

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

这样文本不会在淘汰赛运行之前显示，因为需要 KO 来处理它。如果需要，您现在还可以将消息拉出并使其可变。

score 1 · Accepted Answer

如果不等于就做

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

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

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

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

score 0 · Accepted Answer

如果我将外部 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>

不知道为什么

knockout.js - 如何否定 if 绑定？

3 回答 3

是否有 ifnot 绑定

为什么会闪烁？

Related

Reference