Canjs: привязка данных не завершена

У меня есть вложенный компонент. Родительский компонент устанавливает свойство в области действия дочернего компонента:

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

В дочернем компоненте я слушаю событие изменения слоя

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

},

Посмотреть код:

{{#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}}

Теперь я бы установил всплывающую подсказку для всех элементов в моем списке слоев, как это

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

Как я могу это сделать или как узнать, когда привязка завершена, чтобы я мог это сделать.


person cpiock    schedule 01.02.2016    source источник


Ответы (1)


can.Component имеет «вставленное» событие. Итак, вы можете сделать что-то вроде этого:

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" });
        }
    }
});
person Jeroen    schedule 04.02.2016
comment
хм, но вставленная функция срабатывает до создания моего диапазона, потому что вставлена ​​до привязки данных - person cpiock; 04.02.2016
comment
Вставленное событие было бы подходящим местом для этого, и оно должно срабатывать после того, как все привязки данных произошли. Другой альтернативой является создание простого компонента ‹text-with-popover /›. - person Ryan Wheale; 06.02.2016
comment
Вы пытались использовать window.requestAnimationFrame или setTimeout внутри вставленной функции? Если нет, попробуйте один раз. - person Jry9972; 02.03.2016