Home

Welcome to the ko.component.loader wiki!

Component loader was designed to trigger events when binding is complete for a given set of components. Components can be arranged and loaded in any arbitrary tree structure with event available at every node in the structure. It can also be used to show a "wait" state while components load, which helps avoid flickers and reduces user confusion while page binds.

Summary of usage

• attached binding is used for determining when a component is loaded. This binding can also be used to grab the DOM associated with component.
• Reference class uses reference counting, similar to how garbage collection works, to keep track of outstanding components. An instance of this class is returned from attached handler by the component so the library can associate view model with component. Reference class can be used by a parent component to obtain the view model of child components.
• ko.component.loader is the top level API for building references and listening to page level events. The loader instance can (optionally) be bound as a KO view model to show waiting state while page loads all of its components.

Basic Example

The most basic way to use the component loader, is by instantiating a Reference object and returning this object in the attached handler for your component. In the example below, a test-panel component is loaded when the page is shown. tpRef is created with a completedCallback, which is executed when the test-panel binding occurs for attached binding. From within the completed callback, a reference to the child component's view model is provided as the first parameter.

HTML:

Status:

JS: var pageModel = { loading: ko.observable(true), completedCallback: function (childRef) { pageModel.loading(false); childRef.testValue(childRef.testValue()+1);
} };

var tpRef = ko.componentLoader.ref.child({ completedCallback: pageModel.completedCallback});
var tpModel = { 
  attached: function(element) { return tpRef; },
  testValue: ko.observable(5)
};

ko.components.register('test-panel', {
    viewModel: function() { return tpModel; },
    template: '<div data-bind="attached: true">Test Panel<br>From Code <span data-bind="text: testValue"></span></div>'
});

ko.componentLoader.setOptions({ verbose: true });
ko.applyBindings(pageModel, $('#ko-div')[0]);

See FsFiddle - Basic Example for a live demo.