jquery-mobile - knockout 渲染完成后如何引发事件？

Question

此 jquery 移动表正在通过 knockout 呈现。

<table data-role="table" id="report-table" class="ui-body-a ui-shadow ui-responsive table-stripe"
    data-column-btn-theme="a" data-column-btn-text="Spalten..." data-column-popup-theme="a" data-mode="columntoggle"">
    <thead>
        <tr data-bind="foreach: columns">
            <th data-bind="text: $data.Caption, attr: { 'data-priority': 1 + Math.floor($index() / 4) }"></th>
        </tr>
    </thead>
    <tbody data-bind="foreach: { data: rows, afterRender: tableRowAfterRender }">
        <tr data-bind="foreach: $parent.columns">
            <!-- ko template: { name: $data.template } -->
            <!-- /ko -->
        </tr>
    </tbody>
</table>

为了让“columntoggle”真正起作用，我目前使用“aferRender”事件:

self.tableRowAfterRender = function (element, data) {
    // Skip unless data.Items()[i] is not the last element in the rows collections
    for (var i = 0; i < data.Items().length - 1; i++) {
        if (data.Items()[i] !== self.rows()[self.rows().length - 1].Items()[i])
            return;
    }

    // refresh table after 100ms delay
    setTimeout(function () { $("#report-table").table("refresh"); }, 100);
}

这很不稳定，我讨厌 setTimeout() 做事的方式，这种情况在我使用 jquery mobile 和 knockout 时变得很常见。一旦所有的 knockout 渲染或理想情况下与表格元素内的元素相关的所有渲染都完成后，我需要一种强大的方法来引发事件。在某些此类情况下，我能够使用自定义绑定(bind)，但我不知道如何在这里执行此操作。

Answer 1

您可以尝试使用绑定(bind)初始化

ko.bindingHandlers.init = {
    init: function(element, valueAccessor, allBindings, viewModel) {
        var action = valueAccessor();
        if (typeof action === 'function') {
            setTimeout(action.bind(viewModel, element), 0);
        }
    }
};

像这样:

ko.components.register('simple-component', {
    viewModel: function(params) {        
        this.title = params.title;
        this.initHandler = function() {
            console.log('DOM of component has been built.');
        };
    },
    template:
        '<div data-bind="init: initHandler">\
            Title is: <span data-bind="text: title"></span>\
        </div>'
});

更复杂案例的信息在这里 - http://blog.atott.ru/2015/08/dom-built-event-for-knockout-components.html