使用 Jquery 更改值时 KnockoutJS 属性不会更新

Question

我有一系列复选框，我想收集选定的一个。复选框位于 div 中，当单击 div 时，复选框也应该被选中：

var oCheckBox = $($(this).find('.chkSocialMediaItem').get(0));
oCheckBox.attr('checked', !$(oCheckBox).attr('checked'));

这工作得很好，但 KnockoutJS 不会接受更改，因此不会更新所选项目的计数器。

我在某处读到您需要触发更改事件。但是当我监听复选框上的更改事件时，它实际上会被触发。

任何帮助将不胜感激， 谢谢 ！

更新：

我找到了“淘汰”解决方案。 在我的 div 中，我对“单击”进行了数据绑定，并更改了该函数中的检查值：

<script type="text/html" id="Template">
    <div class="item" data-bind="click: DivClicked">
       <input type="checkbox" data-bind="checked: IsASelectedItem" class="chkSocialMediaItem"/>
    </div>
</script>


function SocialMediaSearchItem() {          
            this.IsASelectedItem = ko.observable();
            this.DivClicked = function () {
                this.IsASelectedItem(!this.IsASelectedItem());
            };
}

这是唯一的解决方案吗？我真的很希望 2 也能看到一个 Jquery 解决方案。

Answer 1

我遇到了同样的问题......虽然我确实找到了一个适合我的解决方案，但与 @RP Niemeyer 发布的解决方案不同，所以我想我会发布它。

Knockout 版本：1.2.1 -- (knockout-1.2.1.js)

要取消选中 Knockout 绑定的复选框，我使用以下命令

$('YourCheckBoxHere').removeAttr('checked');
$('YourCheckBoxHere').triggerHandler('click');

来检查 Knockout 绑定的复选框我使用了以下命令

$('YourCheckBoxHere').attr('checked', 'true');
$('YourCheckBoxHere').triggerHandler('click');

希望如果其他解决方案不起作用，也许这会=) ...在这个问题上浪费了大约3个小时。

Answer 2

checked 绑定仅侦听 click 事件。根据设置实际选中值的时间，手动触发单击事件最终会使框不同步。

设置该值的首选方法是更新视图模型值，正如您在上面的第二个示例中所做的那样。

但是，如果您使用 1.3beta，那么是使用 ko.dataFor API 连接元素与其相应数据的简单方法。它看起来像：

  var oCheckBox = $('.chkSocialMediaItem'),
      data = ko.dataFor(oCheckBox[0]);
      data.selectedItem(!data.selectedItem());