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

Question

我有一系列复选框，我想收集选中的复选框。 复选框在div中，当单击div时，应该同时选中复选框：

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

这段代码运行正常，但是KnockoutJS没有检测到变化，因此没有更新选定项的计数器。

我在某处读到需要触发change事件。但是当我监听复选框的change事件时，它确实被触发了。

希望能得到任何帮助，谢谢！

更新:

我找到了一个“knockout”的解决方案。 在我的div中，我使用了"data-bind"绑定了"click"事件，并在该函数中更改了"checked"值：

<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());
            };
}

这是唯一的解决方案吗？我真的很想看到一个 jQuery 的解决方案。

- Kevin Cloet

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个小时。

- afreeland

Answer 2

checked绑定只监听click事件。手动触发点击事件会导致复选框不同步，因为实际的选中值设置时间不同步。

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

但是，如果您正在使用1.3beta，那么可以使用ko.dataFor API轻松地将元素与其对应的数据连接起来。它看起来可能像这样：

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

- RP Niemeyer

---

谢谢您的快速回复！我会在周一回到工作时检查测试版 :) - Kevin Cloet

哦，那很方便，有什么办法可以找出控件绑定的“属性”以及viewModel吗？ - George Mauer

目前还没有别的方法可以做到，除了可能自己解析 data-bind 属性，然后使用属性名称和数据 (data['somePropertyName'])。 - RP Niemeyer

非常感谢 - 公开该功能（或仅获取可观察对象本身的能力）将非常有用。这将使编写跨站点实用程序变得更加容易。 - George Mauer

再仔细考虑一下，有一种方法可以实现你想要的效果。您可以使用Knockout的绑定提供程序解析具有适当上下文的元素绑定，然后使用生成的对象进行操作。就像这样：http://jsfiddle.net/rniemeyer/BvYQd/。有关绑定提供程序的更多信息，请参见此处：http://www.knockmeout.net/2011/09/ko-13-preview-part-2-custom-binding.html。 - RP Niemeyer