敲除变量未定义

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。已经回答了我的问题。我的绑定在 ViewModel 中工作不正常并且绑定导致了冲突。

Answer 1

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

如果您添加它并使您的 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.computed的新语法，它更明确一些：

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();
  }
});

敲除变量未定义

knockout variable not defined

javascript

observable

knockout.js