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 によって表示されるように設定されます。何かのようなもの：

これは、元のオプションと私が言及した2つのオプションのサンプルであり、バインディングの適用に2秒の遅延があります: http://jsfiddle.net/rniemeyer/mx7SM/2/

于 2012-07-18T01:16:59.587 に答える
0

私にとって、遅延はこれら2つのgithub要点スクリプトが存在する場合にのみ発生します-おそらく本番環境では問題になりませんか？ドキュメントの準備が整うまでバインディングは発生せず、ドキュメントの速度が著しく低下しているように見えます。

于 2012-07-18T01:24:37.790 に答える