Question

我需要将afterRender回调添加到现有的数据绑定语句中，但我正在努力学习语法。

以下是我需要添加afterRender的代码，目前正确渲染：

    <div data-bind="with: detail">
        <div class="row">
            <div class="header">
                <span data-bind="html: headerMainSegment"></span>
                <span data-bind="text: headerSecondSegment"></span>
                <div data-bind="text: rollupSegment"></div>
            </div>
        </div>
    </div>

这是我尝试过的，但内容消失了：

    <div data-bind="with: { data: detail, afterRender: customCode }">
        <div class="row">
            <div class="header">
                <span data-bind="html: data.headerMainSegment"></span>
                <span data-bind="text: data.headerSecondSegment"></span>
                <div data-bind="text: data.rollupSegment"></div>
            </div>
        </div>
    </div>

我将customCode方法添加到viewmodel，但渲染时所有数据属性都显示为null。

Answer 1

如果您想使用afterRender，则需要使用template绑定。

<div data-bind="template: { data: detail, afterRender: customCode }">
   <div class="row">
        <div class="header">
            <span data-bind="html: headerMainSegment"></span>
            <span data-bind="text: headerSecondSegment"></span>
            <div data-bind="text: rollupSegment"></div>
        </div>
    </div>
</div>

另一种选择是创建一个自定义绑定来执行“自定义代码”并使其在with绑定之后运行：

<div data-bind="with: detail, customCode: detail">
    <!-- ... -->
</div>

自定义绑定将是这样的：

ko.bindingHandlers.customCode = {
    update: function (element, valueAccessor, allBindings, vm, context) {
        ko.unwrap(valueAccessor());     // access the value so we're updated when it changes

        // do my custom code with the element... 
    }
};

如何将afterRender添加到data-bind =“with：

1 个答案: