knockout.js - 单击父 div 时更改复选框值

Question

当我单击父 div 时，我正在使用 knockout 并尝试更改复选框的值。这很好用，但现在我无法在实际单击复选框时更改复选框值...复选框后的跨度用于调试目的，以查看变量设置为什么。我尝试使用 clickBubble: false 但这似乎也没有帮助。

我有以下映射:

var mapping = {
        'teams': {
            create: function(options) {
                options.data.active=ko.observable(false);
                options.data.flipActive= function(team, event){
                    if(!$(event.target).hasClass('team_checkbox'))
                        team.active(!team.active());
                }
                return options.data;
            }
        }
    }

以及以下 HTML:

            <div id="selectTeamsArea" data-bind="foreach: teams">
                <div class="teams_result_data" data-bind="click: flipActive, clickBubble: false">
                    <img class="floatLeft" height="40" width="40" data-bind="attr: {src: searchImgLink}" >
                    <div>
                        <p data-bind="text: searchBoldName"></p>
                        <p data-bind="text: searchThirdLine"></p>
                    </div>
                    <input class="right team_checkbox" type="checkbox" name="teams" data-bind="value: idString, checked: active, clickBubble: false" />
                    <span data-bind="text: active"></span>
                </div>
                <div class="clear"></div>
            </div>

非常感谢任何帮助。

更新，包括 JSFIDDLE:http://jsfiddle.net/YYUed/

^即使您注释掉“flipActive”的内部，复选框也无法正常工作。

Answer 1

我认为最好的方法是更换您的 <div>与 <label> , 与 <input> (仍然)作为 <label> 的子元素.这种方法不仅更具语义和可访问性，而且具有点击 <label> 的优点。将与单击复选框本身有效相同。