Question

在我的视图模型中，我有一个布尔属性，可以通过视图中的复选框显示。我希望用户能够单击包含元素以切换属性，但是当用户单击复选框时会出现问题：然后没有注册更改。

考虑这个观点：

<div class="my-option" data-bind="click: toggleOption1">
    <input type="checkbox" data-bind="checked: isOption1Checked" />
    Entire div is clickable to select this option.
</div>

使用此视图模型：

var ViewModel = function() {
    var self = this;
    self.isOption1Checked = ko.observable(false);
    self.toggleOption1 = function(){
        self.isOption1Checked(!self.isOption1Checked());
    };
};

正如您在this corresponding jsfiddle中看到的那样，不允许您点击复选框以更改布尔值observable。这种方式对我来说很有意义，可能点击处理程序会更改值，但是检查的绑定也会处理更改并将其还原。

我觉得我需要的一般解决方案是单向检查绑定或类似的东西，所以我尝试使用attr绑定：

<div class="my-option" data-bind="click: toggleOption1">
    <input type="checkbox" 
           data-bind="attr: { checked: isOption1Checked() ? 'checked' : '???'" />
    Entire div is clickable to select this option.
</div>

但是，这不起作用：html中没有checked="false"选项。您只需省略checked属性即可。我不认为attr绑定可以做到这一点。

我想到的另一个解决方法是创建我自己的绑定（可能基于/将读取位委托给默认的checked绑定），但感觉有点矫枉过正。我错过了一个明显，优雅的Knockout解决方案吗？

我目前的解决方法（试图逃避创建这样的自定义绑定）涉及一些精心设计的视图逻辑：

<div class="my-option" data-bind="click: toggleOption1">
    <!-- ko if: isOption1Checked -->
    <input type="checkbox" checked="checked" />
    <!-- /ko -->
    <!-- ko if: !isOption1Checked() -->
    <input type="checkbox" />
    <!-- /ko -->
    Entire div is clickable to select this option.
</div>

This works，但我的口味非常详细。

任何其他优雅，简洁的方法来处理这个问题？

Answer 1

是的，在发布和搜索更多内容之后，我在another question找到了答案。以下是我的问题中具体情况：

<div class="my-option" data-bind="click: toggleOption1">
    <input type="checkbox" 
           data-bind="checked: isOption1Checked, 
                      click: function() { return true; }, 
                      clickBubble: false" />
    Entire div is clickable to select this option.
</div>

我会在这里留下这个答案和问题作为重复，如果它帮助一个随机的谷歌搜索互联网用户说他的问题与我的相似，而不是类似于另一个。

将检查的绑定与包含元素的单击绑定相结合

1 个答案: