Question

我正在学习Knockout并尝试以下方法。数据显示，但我想要的是数据绑定在块中。例如，前3个将被绑定，然后是接下来的3个，然后是3个，等等。

换句话说：如何在“块”中将“people”推入可观察数组中。

下面是一些示例代码。在我的实际情况中，我正在绑定 images ，并且它们需要时间来加载，所以这就是我想要以块的形式绑定数据的原因。

这是我的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);
    });
});

Answer 1

您可以稍微重写一下视图模型，以便src图像为computed：占位符图像作为基础，或者当图像是图像时的实际图像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>

对于以三个块的形式加载图像，有各种选项。一个基线，hackish，天真的解决方案，使用setInterval每隔X秒启动一个新块。这样的事情jsfiddle。

更好的方法是使用event binding开始下载下一张图片。但是，检查图像是否加载非常困难（缓存和诸如此类），因此您可能希望使用库来处理事物。例如，请参阅this answer。

将数据绑定到组中

1 个答案: