空數組綁定元素在頁面加載時消失

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上並沒有發生太多，但是確實發生在本地以及在部署時-http://knockouttest.herokuapp.com/ 。

有任何想法嗎？

Answer 1

我無法在您的示例中看到該問題，但是您有幾個選擇：

• 在script標簽中使用命名模板。 瀏覽器將不會呈現script標記中的標記。 您似乎確實表明您已嘗試過，但是您可能想換個外觀。

• 否則，您可以將其包裝在元素中並設置display: none在其上display: none內容，也可以使用data-bind="visible: true" 。 當頁面加載時，它將被隱藏，當綁定發生時，KO將其設置為可見。 就像是：

這是一個示例，其中包含我提到的原始選項和兩個選項，以及應用綁定的兩秒鍾延遲： http : //jsfiddle.net/rniemeyer/mx7SM/2/

Answer 2

對我而言，延遲僅在存在這兩個github gist腳本時發生-大概在生產中不會有問題嗎？ 在文檔准備就緒之前，您的綁定不會發生，並且它們似乎在顯着降低其速度。