Question

我正在显示项目列表，如果项目不可用，我必须显示默认消息。现在，我必须检查对象是否已创建，然后检查对象中是否有列表。

所以现在，我正在做下面的工作，它创建了不必要的dom元素。但是，当我对无容器绑定做同样的事情时，它似乎不起作用，并且还有一个＆amp;＆amp; if in KO

的语法

<span data-bind="if: object"> 
    <span data-bind="if: !object().property">
         <p> The list is not available </p>
    </span> 
</span> // Works 

<!-- ko if: object -->
     <!-- ko if: !object().property -->
          <p> The list is not available </p>
     <!-- /ko -->
<!-- /ko -->  // Doesn't work

由于

Answer 1

如CodeThug所述，使用您提供的解决方案将显示消息，直到ko.applyBindings完成。一个更详细的解决方案，但是可以避免问题而不依赖于CSS，就是使用动态模板，如下面的jsfiddle所示：

http://jsfiddle.net/sAkb4/1/

只有在完成ko.applyBindings时，才会在虚拟元素中创建有效标记。

<!-- ko template: { name: dinamycList } -->
<!-- /ko -->

<script type="text/html" id="empty-template">
  ... list is NOT available markup ...
</script>

<script type="text/html" id="list-template">
  ... list is available markup ...
</script>

作为dinamycList一个函数，它根据你想要的有效列表的验证返回模板的名称。

编辑：

通过你的最后一条评论让我想到，如果你想要的行为只是在计算列表并且属性为假之后才显示“不可用的模板”，如果是这样，那么下面的小提琴将修复最后一个提供合适的条件。

http://jsfiddle.net/sAkb4/3/

模板中的“if”条件将处理淘汰准备就绪后但在列表之前的时刻。如果条件太乱，我建议把它放在ko.computed中以获得清晰的标记。

<!-- ko template: { name: dinamycList, if: object() !== undefined && object().property !== undefined } -->
<!-- /ko -->

Answer 2

如您所见，该元素存在于DOM中，并且在ko.applyBindings调用完成之前不会删除它。因此，此消息的瞬间显示。

我会尝试隐藏DOM的整个部分并显示加载指示符。当ko / ajax完成后，可以移除加载指示器并显示您关心的标记。

或者，您可以查看您的网页是否需要一段时间才能加载并尝试改善页面的加载时间。 Chrome分析工具可以为此提供帮助。

Answer 3

使用我的约定优于配置库

，这很容易

http://jsfiddle.net/VVb4P/

就是这样，lib会为你做出模板

   this.items.subscribe(function(items) {
        if(items.length === 0) {
            this.items.push(new MyApp.EmptyViewModel());
        }
   }, this);

Knockout js - ＆amp;＆amp;如果条件和无容器绑定

3 个答案: