Knockout: динамически добавлять привязки к пользовательским элементам

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

Как упоминает RPN в этом комментарии пока нет хуков для событий жизненного цикла на пользовательских элементах (в версии 3.2). По сути, причина, по которой ваше (ab) использование createViewModel не работает, заключается в том, что этот код вызывается до рендеринга любого элемента.

Так что его предложение в этом комментарии относится и к вам. На данный момент самый элегантный способ — создать пользовательскую привязку к элементу верхнего уровня. Если вы хотите сделать его универсальным, вы можете сделать что-то вроде этого:

<custom-element data-bind="render"></custom-element>

А затем в вызове init пользовательской привязки данных render вы можете получить имя пользовательского элемента и найти любую зарегистрированную постобработку для применения. Вот (грубый) пример скрипта: http://jsfiddle.net/8r891g6b/ и вот javascript только что кейс:

ko.components.register('confirm-button', {
    viewModel: function (params) {
        params = params || {};
        this.text = params.text || '(no text passed in)';
    },
    template: '<button data-bind="text: text"></button>'
});

ko.bindingHandlers.render = {
    init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
        ko.bindingHandlers.render[element.tagName.toLowerCase()](element);
    }
};

ko.bindingHandlers.render['confirm-button'] = function (element) {
    ko.utils.registerEventHandler(element, 'click', function (event) {
        if (!confirm('Are you sure?')) {
            event.preventDefault();
        }
    });
};

ko.applyBindings();

Между прочим, этот пример немного шаткий, потому что событие щелчка по кнопке сначала нажмет на кнопку и произойдет независимо от обработчика подтверждения. Я просто придерживался вашего примера, но надеюсь, что основная идея достаточно проста для понимания.

Я экспериментировал с различными методами для достижения желаемых результатов и оценивал их плюсы и минусы. Не претендуя на «ответ», это может быть полезно для дальнейшего использования. Я тестировал:

1. ko.bindingHandlers.component.preprocess: нет доступа к: пользовательскому элементу, шаблону, компоненту и родительской модели представления. доступ к: привязкам.
2. Пользовательский загрузчик компонентов loadTemplate: нет доступа к: пользовательскому элементу. доступ к: шаблону, родительской модели и модели представления компонентов (через шаблон)
3. ko.bindingProvider.instance.preprocessNode: нет доступа к: модели представления компонента, шаблону доступа к: пользовательскому элементу, привязкам, родительской модели представления.

#3 выглядит наиболее подходящим из трех. Учитывая следующий код:

ko.bindingProvider.instance.preprocessNode = function(node) {
   // access to current viewmodel
   var data = ko.dataFor(node), 
       // access to all parent viewmodels
       context = ko.contextFor(node),
       // useful to get current binding values
       component = ko.bindingProvider.instance.getBindings(node, context);
   if (node.nodeName === 'CUSTOM-BUTTON') { // only do if 'my-custom-element'
   // kind of 'raw' string extraction but does the job for demo
       var getMsg = node.getAttribute('params').split('msg:')[1], 
       msg = getMsg.slice(0,getMsg.indexOf(','));
       $(node).attr('data-bind','click: function() { confirm('+ msg +'())}');
   } else {
       return null;
   }
}

И следующая скрипта, чтобы проверить это: /a> (в верхней части JS установите параметр 1 для теста № 2 и 2 (по умолчанию) для теста № 3).

(первый ответ) Примечание: хотя эта часть как бы достигает того, что запросил OP, делая элемент контейнера полезным, она прикрепляет события после вместо до загрузки шаблона; сохранить для справки.

Да, это возможно, хотя я пытался спорить с точки нокаута мнение, что это может быть нежелательно. Учитывая, что привязки событий на самом деле являются только операторами, сообщающими Knockout, регистрируют эту функцию для этого события, вы можете установить привязку click непосредственно через JS, например так:

function customButton(params, parent) {
    var self = this;
    this.msg = params.msg;
    this.label = params.label;
    // this is the same as the click binding
    parent.addEventListener('click', function(e) { 
        alert(self.msg()); alert(e.target.nodeName); 
    }, false);
}
var myComponent = {
    viewModel: { createViewModel: function(params, componentInfo) {
        var parent = componentInfo.element;
        return new customButton(params, parent);
    }},
    template: { element: 'custom-button-tmpl' }
}

Для привязок attr и css это немного сложнее, но, учитывая, что наблюдаемые объекты computed — это просто функции, запускаемые каждый раз, когда их наблюдаемые объекты обновляются, вы можете, например, изменить фон кнопки в нашей виртуальной машине выше следующим образом:

//prop used as function, so name doesn't matter
this.background = ko.computed(function() { 
    parent.style.backgroundColor = params.bg();
});

Проверьте это в этой скрипте. (Нажмите на отступ пользовательского элемента, чтобы увидеть, что это пользовательский элемент, к которому привязано событие; измените цвет, чтобы увидеть «динамическую привязку к пользовательским элементам»).