1

我试图理解淘汰赛。还有一点我不明白。我们有html：

<p>
<input type='checkbox' data-bind="checked: hasCellphone" />
I have a cellphone</p>

<p>
Your cellphone number:
<input type='text' name='cell' data-bind="value: cellphoneNumber, enable: hasCellphone" /></p>

<button data-bind="enable: document.getElementsByName("cell")[0].value != '555'">
Do something</button>

和 JS：

function AppViewModel() {   
this.hasCellphone = ko.observable(false);
this.cellphoneNumber = ko.observable("");}

ko.applyBindings(new AppViewModel());

因此，启用输入有效，但不适用于按钮，即使我在输入中输入“555”，它仍然保持启用状态。

4

3 回答 3

5

淘汰页面上的示例有点误导。enable 绑定采用任何值，但对于自动更新，它必须是可观察的。document.getElementsByName("cell")[0].value != '555'不是可观察的。

cellphoneNumberValid您可以通过向模型添加一个基于 observable 值的 observable 来轻松修复代码cellphoneNumber：

html

<p>
    <input type='checkbox' data-bind="checked: hasCellphone" />
    I have a cellphone
</p>

<p>
    Your cellphone number:
    <input type='text' name='cell' data-bind="
            value: cellphoneNumber,
            valueUpdate: 'afterkeydown',
            enable: hasCellphone" />
</p>

做点什么

js

function parseAreaCode(s) {
    // just a dummy implementation
    return s.substr(0, 3);
}

function AppViewModel() {   
    this.hasCellphone = ko.observable(false);
    this.cellphoneNumber = ko.observable("");
    this.cellphoneNumberValid = ko.computed(function() {
        return parseAreaCode(this.cellphoneNumber()) != '555';
    }, this);
}

ko.applyBindings(new AppViewModel());

jsfiddle

http://jsfiddle.net/bikeshedder/eL26h/

于 2013-01-30T10:08:34.537 回答
2

您需要启用条件是可观察的，否则淘汰赛不会检查该值是否已更改。您刚刚将它绑定到一个 html 元素，当它的值发生变化时，它不会通知敲除。如果您尝试：

<button data-bind="enable: cellphoneNumber() != '555'">Do something</button>
于 2013-01-30T10:04:40.647 回答
0

这是解决此问题的最简单方法，尤其是在您不想更改模型的情况下。非常感谢bikeshedder的回答。

http://jsfiddle.net/NickBunich/C5vfV/2/

<p><input type='checkbox' data-bind="checked: hasCellphone" />
I have a cellphone</p>
<p>Your cellphone number:
<input type='text' data-bind="value: cellphoneNumber, valueUpdate: 'afterkeydown', enable: hasCellphone" /></p>
<button data-bind="enable: cellphoneNumber().trim().substr(0,3) !='555'">Do something</button>

function AppViewModel() {   
this.hasCellphone = ko.observable(false);
this.cellphoneNumber = ko.observable("");}
ko.applyBindings(new AppViewModel());
于 2013-01-31T06:00:09.017 回答