代码之家 › 专栏 › 技术社区 › Jeroen

在包含元素[重复]上组合选中绑定和单击绑定

knockout.js javascript

Jeroen · 技术社区 · 10 年前

在我的视图模型中,我有一个布尔属性,它由视图中的复选框可视化。我希望用户也能够单击包含元素来切换属性,但当用户单击复选框时会出现问题:此时未注册更改。

考虑以下观点:

<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 ,这将不允许您单击复选框以更改布尔可观察值。这对我来说很有意义,可能单击处理程序会更改值,但选中的绑定也会处理更改并还原它。

我觉得我需要的一般解决方案是 单向检查绑定 或者类似的东西,所以我尝试使用 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>

然而,这行不通:没有 checked="false" 选项。您只需省略 checked 属性。我不认为 属性 然而,绑定可以做到这一点。

我想到的另一个解决方法是创建自己的绑定(可能基于/将读取位委派为默认值 选中的 绑定),但这感觉太过分了。我是否错过了一个显而易见的、优雅的淘汰解决方案?

我当前的解决方法(试图避免创建这样的自定义绑定)涉及一些复杂的视图逻辑:

<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 ,但对我来说非常冗长。

还有其他优雅、简洁的方式来处理这个问题吗?

1 回复 | 直到 10 年前

Community CDub 7 年前

是的,就在发布并搜索了一些之后,我在 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>

我将把这个答案和问题作为一个副本留在这里,如果它有助于一个随机的谷歌搜索互联网用户将他的问题与我的问题相似,而不是与其他问题相似。