javascript - knockout 变量未定义

Question

我对 Knockout.js 比较陌生，并且无法让这个计算的可观察值正常工作。简而言之，我想禁用按钮，直到文本区域有输入。这是 HTML:

对于文本区域:

<textarea class="form-control" id="Note" name="note" data-bind="value:text1, valueUpdate: 'keyup'" placeholder="Enter note..."></textarea>

对于按钮:

<btn class="btn btn-maroon" id="saveNote" href="javascript: void(0);" data-bind="enable: hasInput, click: addNoteis"><i class="icon-save"></i>Save Note</btn>

这是我的 .js:

    var vm = {
        text1: ko.observable(""),
    }

    vm.hasInput = ko.computed(function() {
        return this.text1();
    }, vm);

    ko.applyBindings(vm);

在 firebug 中运行时，我从控制台收到一个错误，内容如下:

ReferenceError: text1 is not defined

我应该补充一点，我正在引用这个 fiddle 来创建我的代码: http://jsfiddle.net/oliverw/s2VmL/1/

编辑:按钮的“click:addNote”部分用于其他用途。我忘记在这段代码中删除它，因为“addNote”功能运行得很好。对于造成的困惑，我深表歉意，并感谢大家注意到这一点。正因为如此，T.J.已经回答了我的问题。我的绑定(bind)在 ViewModel 中工作不正常，并且绑定(bind)导致了冲突。

Answer 1

我认为您正在查看旧的错误消息。如您的问题所示，您的虚拟机的问题是您没有在任何地方定义 addNote ，但您试图将 click 绑定(bind)到它。

如果您添加它并使您的 btn 元素成为实际的 button，一切都很好:

var vm = {
  text1: ko.observable(""),
};

vm.hasInput = ko.computed(function() {
  return this.text1();
}, vm);

vm.addNote = function() {}; // <=== Added

ko.applyBindings(vm);

<textarea class="form-control" id="Note" name="note" data-bind="value:text1, valueUpdate: 'keyup'" placeholder="Enter note..."></textarea>
<button type="button" class="btn btn-maroon" id="saveNote" href="javascript: void(0);" data-bind="click: addNote, enable: hasInput"><i class="icon-save"></i>Save Note</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<小时/>

旁注:完全FWIW，我更喜欢 ko.compulated 的新语法，它更明确一点:

vm.hasInput = ko.computed({
  owner: vm,
  read: function() {
    return this.text1();
  }
});

这还允许您为 pure computed 指定 pure: true就像你上面的:

vm.hasInput = ko.computed({
  pure: true,
  owner: vm,
  read: function() {
    return this.text1();
  }
});