нокаут выбор флажка на основе родительского div

Question

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

Ниже приведено то, что мне нужно, но событие click работает только при нажатии на div (не флажок). Я думаю, что это происходит потому, что происходят как клик, так и фактическое событие выбора флажка.

<div class="checkbox-row" data-bind="click: toggleSelected"> 
    <input type="checkbox" data-bind="checked: selected" /> 
    <div data-bind="text: title"></div> 
</div> 

ko.applyBindings(new (function() { 
    var self = this; 
    self.title = ko.observable('some text'); 
    self.selected = ko.observable(false); 
    self.toggleSelected = function() { 
     self.selected(!self.selected()); 
     return false; 
    }; 
})); 

Это похоже на следующий вопрос: Knockout - How to bind outer container css from set of checkboxes?

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

Есть ли альтернативный способ создания этого поведения?

http://jsfiddle.net/BgFe9/

Answer 1

Одним из возможных обходной путь (который не слишком хорошо), чтобы определить «пустой» клик привязки на флажок и установите clickBubble: false.

Это предотвратит призвание toggleSelected метода при щелчке непосредственно в окошке:

<input type="checkbox" data-bind="checked: selected, 
            click: function() { return true; }, 
            clickBubble: false" /> 

Демо JSFiddle.