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

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

在script标记中使用命名模板。浏览器不会呈现脚本标记中的标记。你似乎确实表明你已经尝试过，但你可能想再看看它。
否则，您可以将其包装在元素中并在其上设置display: none并使用data-bind="visible: true"。当页面加载时，它将被隐藏，KO将在绑定发生时将其设置为可见。类似的东西：

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

Answer 2

对我来说，延迟只发生在那两个github gist脚本的存在 - 这可能不是生产中的问题？在文档准备就绪之前，您的绑定不会发生，而且它们似乎显着减慢了它的速度。

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

2 个答案: