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

Empty array bound element disappears on page load

本文关键字：加载 消失 数组 绑定 元素      更新时间：2023-11-10

我有一个简单的集合绑定到一个最初为空的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/.

有什么想法吗？

我在您的样本中看不到这个问题，但您有几个选择：

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

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

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

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

相关文章：