Knockout.js检查绑定 [英] knockoutjs checked binding

问题描述

我在使用checked绑定时遇到了麻烦:尽管"dependentObservable"指示值已更改，但单击复选框不会更新可见状态.

I am having trouble with the checked binding: clicking on the checkbox doesn't update the visible status, although a dependentObservable indicates that the value has changed.

这是HTML片段:

<input type="checkbox" 
        data-bind="checked: document().selected" 
        title="Select one or more documents to find more similar ones" >

这绑定到我的Posting类的实例，该实例具有可观察的document().文档类的相关部分如下所示:

This is bound to an instance of my Posting class that has a document() observable. The relevant part of the document class looks like this:

function Document(data, topic) {
    this.id = ko.observable(data.id);
    this.url = ko.observable(data.url);
    this.title = ko.observable(data.title);

    /** Display state **/
    this.selected = ko.observable(false);
    ko.dependentObservable(function() {
        console.log("Selected " + this.url() + " : " + this.selected());
    }, this);

}

当我单击复选框时，控制台将打印如下内容:

When I click on the check box, the console prints something like this:

Selected http://somedomain.com/doc1.pdf : true

，但该复选框仍未选中.

and yet the checkbox remains unchecked.

我正在使用jQuery 1.4.2和淘汰赛1.2.1

I am using jQuery 1.4.2 and knockout 1.2.1

淘汰赛的其他方面似乎正常运行.当我在jsffiddle中将问题隔离为 this 时，它按预期运行.对我接下来要测试的内容有何想法?

Other aspects of knockout seem to be working correctly. When I isolated the problem in jsffiddle like this, it worked as expected. Any thoughts on what I should test next?

基因

UPDATE:2011年12月12日2:54 PST:

@RP Niemeyer:我还有许多其他dependentObservable实例；唯一的列selected()如下所示:

@RP Niemeyer: I have many other dependentObservable instances; the only one that metnions selected() looks like this:

this.selectedDocuments = ko.dependentObservable( function() {
    return this.documents().findAll(function(doc) {return doc.selected()});
}, this);

findAll会按照您的想法做.

据我所知，正在发生的事情是，当复选框被触发时，selected observable设置为true，这会触发dependentObservable，并打印正确的值.但是，该视图未更新.尽管如此，可观察者认为它已设置为true，因为随后单击同一(取消选择的)复选框不会产生任何进一步的控制台输出.

As far as I can tell, what's happening is that the selected observable is set to true when the checkbox is triggered, which fires the dependentObservable, which prints the correct value. The view is not updated, however. Nonetheless, the observable thinks it's set to true, because subsequent clicks on the same (deselected) checkbox do not produce any further console output.

2011年12月12日，太平洋标准时间更新:

我能够在此 jsfiddle 中重现该问题.如果您在封闭的div上删除了点击处理程序，则复选框可以正常工作.是否有解决方法，或者这是已知问题?

I was able to reproduce the problem in this jsfiddle. If you edit out the click handler on the enclosing div, the checkboxes work correctly. Is there a work-around, or is this a known problem?

推荐答案

确定-进行有意义的更新即可.您可以做的是从外部div上的点击处理程序中按return true;.这将允许执行默认操作.

OK- with the updates it makes sense. What you can do is return true; from the click handler that is on the outside div. This will allow the default action to proceed.

http://jsfiddle.net/rniemeyer/SbuEV/8/

这篇关于Knockout.js检查绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！