Javascript 分组绑定数据

我正在学习击倒，并尝试以下内容。数据被显示，但我想要的是数据被绑定成块。例如，前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>

---

您可以稍微重写视图模型，以便图像的

src

可以是：作为基础的占位符图像，或者在加载图像时实际的图像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>

要以三个一组的方式加载图像，有多种选择。这是一个基线、黑客式、幼稚的解决方案，使用setInterval每X秒启动一个新块。像这样的

---

最好是在加载下一个图像时使用开始下载下一个图像。但是，检查是否加载了图像非常困难（缓存等），因此您可能需要使用库来处理这些事情。例如，请参见。

IMO，块绑定不是解决此问题的正确方法。您可能更愿意将可观察数组中的人推到“块”中。您可以先推前三个，然后在某个事件上推后三个，依此类推。您可以在这里使用分页技术。@ShuhelAhmed:请看分页示例。我可以将“initialData”划分为块并推送到可观察数组。该示例使用外部库进行分页或生成网格“knockout.simpleGrid.js”。好吧，你需要做的就是把你的初始数据加载到“块”中。若您从服务器检索json，一次只需加载3个。如果您的所有数据都在客户端可用，请将它们保存在某个数组中，只需从源中取出3个数据并推送到该数组即可。顺便说一下，在您的viewModel中没有“人”的概念。你有一个主题列表。你可以考虑修改你的代码示例。@ SouHelaMeM:更新我的文章，我试图使三块，但它没有给我正确的输出。这只是最后一场。

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