javascript - 每当组件加载到 DOM 时，Knockout.js 回调

Question

我正在使用 knockout.js 编写一个单页应用程序。我想让应用程序中的所有文本框都以某种方式运行，例如选择焦点上的所有当前文本。

为了避免重复的解决方案，例如向所有输入字段添加自定义绑定(bind)，或者在我加载组件/模板的任何地方实现 afterRender，我想在一个集中的位置解决这个问题，例如处理全局事件等。

我的第一个预感是实现一个自定义组件加载器，下面的代码可以第一次加载组件，但对于连续加载来说就不是那么好了。但是它应该提供一个很好的例子来说明我正在尝试做的事情

总结:在提供的代码中绑定(bind)到 focusHandler 的事件是我希望在组件被 knockout 渲染时运行的代码。我想避免在每次加载组件或模板时都必须指定它。

var callbackHandle: number;
var focusHandler = (e: JQueryEventObject) => {
    var $this = $(e.target);

    $this.select();

    window.setTimeout(() => {
        $this.select();
    }, 1);

    // Work around WebKit's little problem
    function mouseUpHandler() {
        // Prevent further mouseup intervention
        $this.off("mouseup", mouseUpHandler);
        return false;
    }

    $this.mouseup(mouseUpHandler);
};
var templateAutoSelectInputTextLoader = {
    loadTemplate: (name, templateConfig, callback) => {

        var internalCallback = (data: any) => {
            callback(data);
            // Throttling so that this only happens once (after all components are loaded)
            if (callbackHandle) {
                clearTimeout(callbackHandle);
            }

            callbackHandle = window.setTimeout(() => {
                $("input[type=text]").off("focus", focusHandler).on("focus", focusHandler);
                console.log("Components loaded");
            }, 200);

        };

        ko.components.defaultLoader.loadTemplate(name, templateConfig, internalCallback);
    }
};

ko.components.loaders.unshift(templateAutoSelectInputTextLoader);

Answer 1

既然是SPA，页面一直在动态修改。但是，body 元素只创建一次，对吗？您可以使用附加到 body 的委托(delegate)事件。

$('body').on('focus', 'input[type="text"]', function (){
   //your function here
});