Как привязать событие к Can.Control для запуска всякий раз, когда элемент, соответствующий селектору, добавляется к элементу управления?

Я пытаюсь создать виджет DateTimePicker и не хочу беспокоиться о создании экземпляра виджета, поэтому я создал Can.Control, который принимает тело html в качестве элемента.

Но теперь мои элементы ввода отображаются в DOM с помощью can.view. Как привязать событие к вставке нового элемента dateTime в мою область управления?

/**
 * DateTime Plugin
 */

plugins.DateTime = can.Control.extend({

},{
    init : function ( element , options ){
    },

    'input.dateTime click' : function (){
        $( this.element ).find('input.dateTime').datetimepicker();
    }
});
$(function(){
    new plugins.DateTime('body');
});

Можно ли каким-либо образом указать «загрузку input.dateTime» для привязки средства выбора даты, когда элемент добавляется к элементу управления?


canjs canjs-view canjs-control
person Neil DCruz    schedule 15.01.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Есть несколько способов сделать это, например, ваш рендеринг на основе can.view может выполнить обратный вызов после его завершения, поэтому вы можете сделать: var that = this; can.view(template, data, function() { that.element.find("input.dateTime").datetimepicker(); }

Но это не совсем то, что я бы рекомендовал. В предыдущем примере не учитываются случаи, когда одно из этих полей должно быть перерисовано из-за изменения данных после первого рендеринга представления. Вместо этого создайте помощник как таковой: Mustache.registerHelper("datetimepicker", function() { return function(el) { $(el).datetimepicker(); } });

Затем в вашем (Mu)Stache файле:

<input type="text" name="datetime_start" class="dateTime" {{datetimepicker}} can-value="datetime_start">

person air_hadoken    schedule 16.01.2015
comment
Спасибо! Ваше второе предложение имеет смысл, но весь HTML-код моего приложения не отображается с использованием средства визуализации усов, для которого мне все равно придется привязывать средство выбора даты и времени отдельно. Элемент управления показался мне лучшим вариантом, поскольку мне не нужно было бы отслеживать привязки, пока элементы находятся в пределах моей области управления. Я видел некоторые предложения по использованию control.on, но не мог понять, как применить их к моей ситуации. - person Neil DCruz; 16.01.2015
comment
Это сложно, потому что вставленное событие (событие CanJS, когда элемент присоединен к DOM) не всплывает, поэтому вы не можете прослушивать его в делегате. В противном случае вы могли бы сделать this.on("inserted", "input.dateTime", function(el, ev) { ... }). Один из способов обойти это — использовать MutationObserver, потому что он будет перехватывать совпадения, добавленные ниже связанного элемента; в качестве альтернативы вы можете использовать помощник Mustache, который привязывается к вставленному непосредственно в добавляемый элемент, а затем отправляет синтетическое событие, которое всплывает (например, datetimeinserted). Ни один из них не является необходимым для методов, описанных выше. - person air_hadoken; 17.01.2015