0

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

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

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

这是我的视图模型：

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

您可以稍微重写您的视图模型，以便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>

为了以三个为一组加载图像，有多种选择。一个基线、hackish、幼稚的解决方案，使用 setInterval 每 X 秒开始一个新块。像这样的 jsfiddle。

更好的是使用事件绑定在加载下一张图像时开始下载。但是，检查图像是否已加载非常困难（缓存等），因此您可能希望使用库来处理事情。例如，请参阅此答案。

于 2013-03-23T18:11:57.543 回答