javascript - 空数组绑定(bind)元素在页面加载时消失

Question

我有一个绑定(bind)到 的简单集合可观察数组 最初是空的。当页面呈现时，它“有时”会在绑定(bind)开始并删除元素之前显示空模板。 如果您看不到它，请刷新页面几次。 这发生在容器少模板的情况下，但也发生在普通的内联和脚本标签样式模板中。

查看:

<div>
  <input data-bind="value: address"/>
  <button data-bind="click: search">Search</button>
</div>
<!-- ko if: list().length > 0 -->
<h5 data-bind="text: list().length"></h5>
<!-- /ko -->
<!-- ko foreach: list -->
    <div class="result" data-bind="text: addr"></div>
<!-- /ko -->​

Javascript:

$(function() {

  var viewModel = function() {
      var self = this;

      self.address = ko.observable("Portland");

      self.list = ko.observableArray();
      self.hasData = function(){return self.list().length > 0;};

      self.search = function() {
              self.list.push({ addr: "Item01" , index: 1 });
              self.list.push({ addr: "Item02" , index: 2 });
              self.list.push({ addr: "Item03" , index: 3 });      
      };
  };

  var vm = new viewModel();
  ko.applyBindings(vm);
});​

我在 jsFiddle - http://jsfiddle.net/motowilliams/mx7SM/ 上似乎没有发生太多事情或 JSBin，但确实发生在本地以及何时发生 deployed - http://knockouttest.herokuapp.com/ .

有任何想法吗？

Answer 1

我无法在您的示例中看到问题，但您有几个选择是:

在 script 中使用命名模板标签。浏览器不会呈现脚本标记中的标记。您似乎确实表明您尝试过它，但您可能想再看看它。

否则，您可以将其包装在一个元素中并设置 display: none在它上面使用data-bind="visible: true"也是。当页面加载时，它将被隐藏，并且 KO 将在绑定(bind)发生时将其设置为可见。就像是:

这是一个示例，其中包含我提到的原始选项和两个选项以及应用绑定(bind)时的两秒延迟:http://jsfiddle.net/rniemeyer/mx7SM/2/