如何通知绑定处理程序内容已完全加载

How to notify a binding handler the content is fully loaded?

本文关键字：加载 程序 处理 何通知 通知 绑定      更新时间：2023-09-26

我正在创建一个绑定处理程序与carousel基于我的API给出的js对象工作。出于测试目的，我静态加载内容。

我有以下对象:

self.images = [
    { 
      imageUrl: 'http://www.triptips.com.br/site/wp-content/uploads/2013/11/castillo-praga.jpg', 
      description: 'Photo from Praga.' 
    },
    { 
      imageUrl: 'http://www.4yourevista.com.br/wp-content/uploads/2014/06/berlim-01-4you.jpg', 
      description: 'Photo from Berlim.' },
    { 
      imageUrl: 'http://cdni.wired.co.uk/1920x1280/k_n/London_5.jpg', 
      description: 'Photo from London.' },
    { 
      imageUrl: 'http://www.dudalinafeminina.com.br/blog/wp-content/uploads/2013/08/paris2.jpg', 
      description: 'Photo from Paris.' },
    { 
      imageUrl: 'http://upload.wikimedia.org/wikipedia/commons/e/e1/1_hongkong_panorama_victoria_peak_2011.JPG', 
      description: 'Photo from Hong Kong.' }
];

好吧，一旦imageUrl将从其他地方加载，它将需要一些时间来完全加载。

我正在创建这个处理程序:

ko.bindingHandlers.carousel = {
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        $(element).slick({ ... }); // this is the slider component
    },
    update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
    }
}

处理静态内容(比如一些文本)，效果很好。但是，当我尝试在foreach迭代中使用此绑定时，它不起作用。

<div class="centered" data-bind="carousel: {}, foreach: images">
    <div>
        <img alt="" data-bind="attr: { src: imageUrl, title: description }" />
    </div>
</div>

谢谢你的帮助!

按照找到绑定的顺序进行解释。

您可能希望foreach绑定在carousel绑定之前执行，因此尝试将它们反转:

<div class="centered" data-bind="foreach: images, carousel: {}">
相关文章：