0

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.

cpiock
  • 1,275
  • 2
  • 17
  • 44

1 Answers1

0

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" });
        }
    }
});
Jeroen
  • 1
  • hmm but the inserted function fires before my span is created because inserted is before databind – cpiock Feb 04 '16 at 13:32
  • The inserted event would be the proper place to do this and it should fire after all of the data bindings have happened. Another alternative is to create a simple component. – Ryan Wheale Feb 06 '16 at 06:01
  • Did you try using _window.requestAnimationFrame_ or _setTimeout_ inside inserted function? If not, try it once. – Jry9972 Mar 02 '16 at 09:46