2

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

所以现在，我正在执行以下操作，它会创建不必要的 dom 元素。但是，当我对无容器绑定执行相同操作时，它似乎不起作用，并且在 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

谢谢

4

3 回答 3

2

正如 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 一个函数，它根据您想要的有效列表的验证返回模板的名称。

编辑：

阅读您的最后一条评论让我想到，如果您想要的行为是仅在计算列表并且属性为 false 之后才显示“不可用的模板”，如果是这样，下面的小提琴将修复最后一个提供正确的条件。

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

模板中的“if”条件将处理淘汰赛准备好之后但列表之前的那一刻。如果条件变得太混乱，我建议将其放在 ko.computed 中以进行清晰标记。

<!-- ko template: { name: dinamycList, if: object() !== undefined && object().property !== undefined } -->
<!-- /ko -->
于 2013-05-04T23:35:29.603 回答
0

THis is very easy with my Convention over configuration lib

http://jsfiddle.net/VVb4P/

Just this and the lib will do the templatating for you

   this.items.subscribe(function(items) {
        if(items.length === 0) {
            this.items.push(new MyApp.EmptyViewModel());
        }
   }, this);
于 2013-05-06T07:09:41.340 回答
0

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

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

或者，您可以查看您的页面是否需要一段时间来加载并尝试改善页面的加载时间。chrome 分析工具可以帮助解决这个问题。

于 2013-05-04T17:10:49.060 回答