在 foreach 中加载所有项目后，Knockoutjs 组件回调

Question

我在 knockoutjs 中有一个组件，用于使用 javascript 图 api 从 Facebook 创建相册列表。

如何在渲染所有项目后调用函数？

我试过 foreach: {data: items, afterRender: afterItemsLoaded} - 方法 afterItemsLoaded 不是在渲染所有项目之后为每一行调用。

我尝试使用以下代码：

HTML:

<h1>List: </h1>
<list></list>

Javascript:

var countOfItemLoaded = 0;

ko.components.register('list', {
    viewModel: function() {
    },
    template: '<div data-bind="foreach: {data: items, afterRender: afterItemsLoaded}"><div data-bind="text: $data"></div></div>'
});

var viewModel = function() {
    var self = this;
    self.items = ko.observableArray([]);

    $.getJSON("https://graph.facebook.com/410564482402231/albums?fields=photos,name,photos.name",  function (result) {   
            $.each(result.data,function(key, item)  {            
                self.items.push(item.name);
            });

    });


    self.afterItemsLoaded = function() {
        countOfItemLoaded = countOfItemLoaded + 1;
        alert("Loaded item " + countOfItemLoaded);
    }
};

ko.applyBindings(viewModel);

jsFiddle 中的演示：

jsFiddle link

Answer 1

我认为还没有为此添加支持。

参见：https://github.com/knockout/knockout/pull/339

从事 Knockout 工作的 Ryan Niemeyer 几乎在 2 年前就向其他人提供了这个解决方案 knockoutJS execute callback after foreach finishes rendering

在 foreach 中加载所有项目后，Knockoutjs 组件回调

Knockoutjs components callback after loaded all items in foreach

javascript

facebook

knockout.js