Я использую Durandaljs и создаю несколько многоразовых виджетов. Виджеты отличные! Тем не менее, я пытаюсь создать способ, чтобы один виджет получал количество элементов в дочернем виджете.
Например, у меня есть два виджета: виджет-аккордеон, который просто позволяет сворачивать разделы страницы, и второй виджет, который отображает элементы в списке.
Мне нужен заголовок виджета аккордеона, чтобы иметь количество дочерних элементов списка из другого виджета. Или он может отображать количество слов, по сути, ему нужно указать, что он подсчитывает внутри своего содержимого, и это может различаться в зависимости от того, какой тип содержимого он содержит.
Короче говоря, мне просто нужен способ связи между родительским виджетом и дочерним виджетом без жесткого знания кода одного виджета внутри другого виджета, разработчик должен явно объявить, каким он хочет, чтобы счет был.
Вещи, которые я пробовал, но не работают или не нравятся:
ko.bindingHandlers.counter = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
alert('init');
var value = valueAccessor();
$(element).text(bindingContext.$parent.settings.items.length);
},
update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
alert('update');
var value = valueAccessor();
$(element).text(bindingContext.$parent.settings.items.length);
}
};
Вышеприведенное не работает, потому что, когда я заставил его «работать», он работал только изначально, обновления не отображались, потому что он не наблюдал за наблюдаемым и переходил на
bindingContext.$parent.settings.items().length
выдало ошибку, потому что внутри bindingContext он не является наблюдаемым, хотя я использовал settings.items().length в дочернем виджете, и это сработало, потому что это привязанный наблюдаемый объект, который обновляется.
Я также мог бы написать jQuery для подсчета элементов, но это не кажется правильным, учитывая, что это будет специфично для блока HTML, а не для элементов данных в наблюдаемом.
$(document).on('DOMNodeInserted', '.contentWidget', function () {
var $t = $(this);
var count = $('.contentItem', $t).length;
var $parent = $t.closest('[data-countable]');
var $countEl = $parent.find($parent.attr('data-countable'));
if ($countEl) {
$countEl.text(count);
}
});
Наконец, наверняка кто-то еще делает что-то подобное, а я просто еще не нашел, или мне не хватает простого способа сделать это, потому что я что-то пропустил либо в документах Durandal, либо в документах Knockout.
