1

我有一个简单的集合绑定到一个最初为空的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 上发生的事情并不多，但在本地和部署时确实发生了 - http://knockouttest.herokuapp.com/。

有任何想法吗？

4

2 回答 2

1

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

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

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

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

于 2012-07-18T01:16:59.587 回答
0

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

于 2012-07-18T01:24:37.790 回答