предотвратить развертывание/свертывание пользовательского расширителя Knockout/jQuery при установке флажка

Скрипка, на которую можно сослаться в этом вопросе: http://jsfiddle.net/CJRDQ/3/< /а>

Я создал простой пользовательский расширитель, например:

<div class="ui-expander">
  <h3 class="ui-expander-head">...</h3>
  <div class="ui-expander-content">...</div>
</div>

Функциональность расширителя реализована с помощью пользовательской привязки Knockout.js и некоторого jQuery (использование пользовательской привязки для решения проблем, созданных привязкой with).

ko.bindingHandlers.expand = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        if ($(element).hasClass('ui-expander')) {
            var expander = element;
            var head = $(expander).find('.ui-expander-head');
            var content = $(expander).find('.ui-expander-content');

            $(head).click(function () {
                $(head).toggleClass('ui-expander-head-collapsed')
                $(content).toggle();
            });
        }
    }
};

Это работает, как и ожидалось, если в расширительной головке нет интерактивных элементов управления. В моем текущем сценарии мне нужно поставить флажок в заголовке расширителя, чтобы отфильтровать результаты в модели представления:

<div class="ui-expander" data-bind="expand: true">
    <h3 class="ui-expander-head">
        <span class="ui-expander-toggle">[-]</span> Expander Title
        <input id="cbx" type="checkbox" data-bind="checked: showAll" /> <label for="cbx">Show All</label>
    </h3>
    <div class="ui-expander-content">
        Expander Content
    </div>
</div>

Если я нажму на метку, поведение развертывания/свертывания не сработает, а соответствующий флажок будет установлен/снят (желательно). Однако, если я нажму на флажок напрямую, сработает развернуть/свернуть, и соответствующий флажок будет установлен/снят (нежелательно).

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

Опять же, я предоставил скрипт для справки: http://jsfiddle.net/CJRDQ/3/


jquery knockout.js knockout-2.0
person sellmeadog    schedule 27.06.2012    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Вы можете добавить обработчик кликов и вызвать stopPropagation() для события, чтобы предотвратить его распространение на заголовок и вернуть true, чтобы оно все равно было обработано флажком для изменения состояния. Вам также нужно добавить обработчик к метке, если вы хотите, чтобы он мог изменять состояние флажка, а не запускать развертывание или свертывание:

<input id="cbx" type="checkbox" data-bind="checked: showAll, click: preventClick" />
<label for="cbx" data-bind="click: preventClick">

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

this.preventClick = function(data, event) {
    event.stopPropagation();
    return true;
};

http://jsfiddle.net/HGxc6/

person Jason Goemaat    schedule 27.06.2012

arrow_upward
0
arrow_downward

Ваши требования показались мне немного запутанными. Является ли эта обновленная скрипта тем, что вы искали: http://jsfiddle.net/photo_tom/CJRDQ/6/

person photo_tom    schedule 27.06.2012
comment
Неа. Флажок должен быть внутри расширительной головки. Ответ Джейсона кажется правильным. - person sellmeadog; 28.06.2012