Search code examples
knockout.jsknockout-components

Component lifecycle


Below is an example that creates a simple component. According to http://knockoutjs.com/documentation/component-binding.html#component-lifecycle it's possible to add a dispose function that get's invoked by ko when the component is removed from the DOM. I'm looking for something similar that would allow me to hook into step 5 The component is active.

additional info as requested by comment

In the example below I'd like to a) insert the DOM fragment created by the ko component and b) once it's attached to the DOM convert the <ul> into a kendo PanelBar. This is pretty similar to the way it could be done using Durandal's compositionComplete event. There are probably other solutions, but I'm interested to see how/if this could be accomplished by using knockout components.

template

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">Panel title</h3>
    </div>
    <div class="panel-body">
       <ul class="panelBar" data-bind="foreach: widgets">
          <li data-bind="text: text"></li>
       </ul>
    </div>
</div>

viewModel

var widgets = [
    {
        text: 'Options'
    },
    {
        text: 'Pages'
    }
];

function FeaturePanel(params){
    this.widgets = ko.observableArray(widgets);
}

function createViewModel ( params, componentInfo ) {

   return new FeaturePanel(params);
}

module.exports = {
    createViewModel: createViewModel
};

Solution

  • Looks like I'm not the only, who wants to hook into the active event, but currently this is not supported by knockout. However there's a feature request for 3.3+ https://github.com/knockout/knockout/issues/1475