Knockout启用javascript

Question

我想了解淘汰赛。有一件事我不明白。我们有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”它仍然保持启用状态。

Answer 1

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

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

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/

Answer 2

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

<button data-bind="enable: cellphoneNumber() != '555'">Do something</button>

Answer 3

这是实现这一目标的最简单方法，特别是如果您不想更改模型。非常感谢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());