Knockout.js callback whenever a component is loaded into the DOM


Havardu

I am writing a single page application using kickout.js. I want all textboxes in the application to behave in a certain way, for example, to select all the text currently in the set.

To avoid duplicate solutions like adding custom bindings to all input fields, or implementing afterRender wherever I load components/templates, I'd like to address this in a centralized location, like handling global events, etc.

My first instinct was to implement a custom component loader, the code below works the first time the component is loaded, but not so much for continuous loading. However, it should give a good indication of what I'm trying to do

Summary: The event bound to focusHandlerin the provided code is the code I want to run when a component is rendered via knockout. I would like to avoid specifying this option anywhere a component or template is loaded .

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);
Fabio Luz

Since it's a SPA, the page has been dynamically modified. However, the bodyelement is only created once, right? You can use delegate events attached to body.

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

Related


Knockout.js callback whenever a component is loaded into the DOM

Havardu I am writing a single page application using kickout.js. I want all textboxes in the application to behave in a certain way, for example, to select all the text currently in the set. To avoid duplicate solutions like adding custom bindings to all input

Knockout.js callback whenever a component is loaded into the DOM

Havardu I am writing a single page application using kickout.js. I want all textboxes in the application to behave in a certain way, for example, to select all the text currently in the set. To avoid duplicate solutions like adding custom bindings to all input

Callback when DOM is loaded in react.js

Brianmearns I want to call a callback on my react.js component when its DOM element (including all children) is actually loaded on the page and ready. Specifically, I have two components that I want to render the same size, choosing the maximum of either compo

Callback when DOM is loaded in react.js

brianmearns: I want to call a callback on my react.js component when its DOM element (including all children) is actually loaded on the page and ready. Specifically, I have two components that I want to render the same size, choosing the largest of either comp

Callback when DOM is loaded in react.js

brianmearns: I want to call a callback on my react.js component when its DOM element (including all children) is actually loaded on the page and ready. Specifically, I have two components that I want to render the same size, choosing the largest of either comp

Component Communication in Knockout.JS

Mathias Mamsch I'm designing a "medium" sized app in KnockoutJS and I'd like to know how to send events between components. Imagine a nested component hierarchy in KnockoutJS: Root Viewmodel -> A -> B -> C -> D How does D respond to the message

Component Communication in Knockout.JS

Mathias Mamsch I'm designing a "medium" sized app in KnockoutJS and I'd like to know how to send events between components. Imagine a nested component hierarchy in KnockoutJS: Root Viewmodel -> A -> B -> C -> D How does D respond to the message

Component returned from .map() not loaded in DOM

IWI I'm trying to load some components into the DOM after a getcall . The console will confirm that the component is loaded into the variable, but the DOM will not be updated. Is there a grammar problem const Blog: FC<BlogProps> = ({title, url}): ReactElement

Component returned from .map() not loaded in DOM

IWI I'm trying to load some components into the DOM after a getcall . The console will confirm that the component is loaded into the variable, but the DOM will not be updated. Is there a grammar problem const Blog: FC<BlogProps> = ({title, url}): ReactElement

Component returned from .map() not loaded in DOM

IWI I'm trying to load some components into the DOM after a getcall . The console will confirm that the component is loaded into the variable, but the DOM will not be updated. Is there a grammar problem const Blog: FC<BlogProps> = ({title, url}): ReactElement

Component returned from .map() not loaded in DOM

IWI I'm trying to load some components into the DOM after a getcall . The console will confirm that the component is loaded into the variable, but the DOM will not be updated. Is there a grammar problem const Blog: FC<BlogProps> = ({title, url}): ReactElement

Component returned from .map() not loaded in DOM

IWI I'm trying to load some components into the DOM after a getcall . The console will confirm that the component is loaded into the variable, but the DOM will not be updated. Is there a grammar problem const Blog: FC<BlogProps> = ({title, url}): ReactElement

Knockout.js: Local Observables in Component ViewModels

Steve Johnstone I'm using a knockout component (loaded via require.js) to create a login widget. Javascript: ko.components.register('login-widget', { viewModel: { require: '/components/login-widget.js' }, template: { require: 'text!/components/login-wi

Knockout.js component parameter undefined

Arnold Wiersma I am creating a Knockout js component that can be used in a notification system. When I add a component to the page I get a params is undefined message, it looks like my params object is not sent to the viewmodel's constructor. At first I though

Access Knockout component DOM from desired AMD viewModel

Silicon Valley I load my Knockout components this way: ko.components.register("example", { viewModel: {require: "widgets/example"}, template: {require: "text!widgets/example.html"} }); with example.js(extremely simplified): "use strict"; define(["kn

Access Knockout component DOM from desired AMD viewModel

Silicon Valley I load my Knockout components this way: ko.components.register("example", { viewModel: {require: "widgets/example"}, template: {require: "text!widgets/example.html"} }); with example.js(extremely simplified): "use strict"; define(["kn