空数组绑定元素在页面加载时消失

Question

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

查看：

<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

对我来说，延迟只发生在存在这 2 个 github gist 脚本的情况下——这在生产中可能不会成为问题？在文档准备好之前，您的绑定不会发生，并且它们似乎显着减慢了速度。

Answer 2

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

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

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

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