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

时间:2011-10-14 12:32:58

标签: jquery knockout.js

我有一系列复选框,我想收集所选的一个。复选框位于div中,当单击div时,也会检查复选框:

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

这很好用,但是KnockoutJS没有接收到更改,因此不会更新所选项目的计数器。

我读到了你需要触发更改事件的地方。但是当我在复选框上听到更改事件时,它实际上会被触发。

任何帮助将不胜感激, 谢谢!

更新

我找到了'淘汰'解决方案。 在我的div中,我对'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());
            };
}

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

2 个答案:

答案 0 :(得分:12)

我遇到了同样的问题......虽然我找到了一个对我有用的解决方案,与@RP Niemeyer发布的解决方案不同,所以我想我会发布它。

淘汰赛版本:1.2.1 - (knockout-1.2.1.js)

要取消选中Knockout绑定的复选框,我使用了以下

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

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

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

希望如果其他解决方案无效,或许这会=)...在这个问题上浪费了大约3个小时。

答案 1 :(得分:11)

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

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

但是,如果您使用1.3beta,则可以使用ko.dataFor API轻松地将元素与其对应的数据相关联。它看起来像是:

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