Canjs: Databind not finished

Question

I have a nested component. The parent component set's a property in the scope of the child component:

<toc layers="layers" selectedlayers="selectedlayers"></toc>

In the child component i listen on the change event of the layer

"{scope} layers": function (el, event) {

},

View code:

{{#if layers.length}}
    {{#each layers}}
    <li>
        <input type="checkbox" name="{{guid}}" value="{{url}}" id="checkBoxLayer" {{#if isVisible}}checked{{/if}}/>{{name}}
        <span class="js-layer-icon glyphicon glyphicon-info-sign pointer-cursor" data-container="body" data-toggle="popover" data-placement="left" data-content="{{copyright}}"></span>
    </li>
    {{/each}}
    {{/if}}

I would now set a tooltip for all items in my layers list like this

$("span.js-layer-icon").popover({ trigger: "hover" });

How can i do this or how i know when binding is completed so i can do this.

Answer 1

can.Component has an "inserted" event. So you could do something like this:

can.Component.extend({
    tag         : 'custom-tag',
    template    : can.view('my_template'),
    viewModel   : myVM,
    events : {
        "inserted": function() {
            this.element.find("span.js-layer-icon").popover({ trigger: "hover" });
        }
    }
});