0

私はノックアウトを学び、以下のようなことを試みています。データは表示されますが、必要なのはデータをチャンクにバインドすることです。たとえば、最初の3つがバインドされ、次に3つ、次に3つというようにバインドされます。

言い換えると、「チャンク」の監視可能な配列に「人」をプッシュするにはどうすればよいですか。

以下はいくつかのサンプルコードです。私の実際のケースでは、画像をバインドしていますが、画像の読み込みに時間がかかるため、データをチャンクでバインドする必要があります。

これが私のviewModelです：

var viewModel = {
   topicsList : ko.observableArray()
};

データバインディングは次のとおりです。

dispatcher(viewEvent, function(event, data){    
  $.each(data, function(){
    viewModel.people.push(this);
  });
});


ko.applyBindings(new viewModel);

これが私のHTMLです：

<div data-bind="foreach: people">
  <div data-bind="text:firstName"></div
</div>

観察可能な配列で人々をプッシュするために、私は次のようなことを試みました：

dispatcher(viewEvent, function(event, data) {
  var loop = 0;

  $.each(data, function(){
    ++loop;
    viewModel.topicsList.push(this);
    if(loop%3==0) {                     
      ko.applyBindings(viewModel);
    });
});
4

1 に答える 1

1

ビューモデルを少し書き直して、srcfor画像が計算されるようにすることができます。つまり、ベースとしてのプレースホルダー画像、または画像が読み込まれるときの実際の画像URLです。このような：

function personViewModel(url) {
    var self = this;

    self.firstName = ko.observable("Johndoe");
    self.imageUrl = ko.observable(url);
    self.mayLoad = ko.observable(false);

    self.imageSrc = ko.computed(function() {
        return self.mayLoad() ? self.imageUrl() : "http://soulclimbing.mobi/Content/Media/image-loading-animation.gif";
    });
}

このビューのようなものを使用できます。

<div data-bind="foreach: people">
  <div>
      <span data-bind="text:firstName"></span>
      <br />
      <img data-bind="attr: {src: imageSrc}" />
  </div>
</div>

3つのチャンクで画像をロードするために、さまざまなオプションがあります。setIntervalを使用してX秒ごとに新しいチャンクを開始するだけのベースラインのハック的でナイーブなソリューション。このjsfiddleのようなもの。

イベントバインディングを使用して、次のイメージがロードされたときにダウンロードを開始することをお勧めします。ただし、画像が読み込まれているかどうかの確認は非常に難しいため（キャッシュなど）、ライブラリを使用して処理することをお勧めします。たとえば、この回答を参照してください。

于 2013-03-23T18:11:57.543 に答える