敲定变量未定义(knockout variable not defined)

编程入门行业动态更新时间:2024-10-26 04:32:25

我对Knockout.js比较陌生，并且无法使这个计算的observable正常工作。简而言之，我想禁用一个按钮，直到textarea输入。这是HTML：

对于textarea：

对于按钮：

这是我的.js：

var vm = { text1: ko.observable(""), } vm.hasInput = ko.computed(function() { return this.text1(); }, vm); ko.applyBindings(vm);

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

ReferenceError：未定义text1

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

编辑：按钮的“click：addNote”部分用于其他内容。我忘记在此片段中删除它，因为“addNote”功能正常工作。我为这种困惑道歉，我感谢大家注意到它。因此，TJ似乎回答了我的问题。我在ViewModel中使绑定工作不正常，绑定导致冲突。

I'm relatively new to Knockout.js and am having trouble getting this computed observable working. In short, I want to disable a button until the textarea has input. Here is the HTML:

For the textarea:

For the button:

And here is my .js:

var vm = { text1: ko.observable(""), } vm.hasInput = ko.computed(function() { return this.text1(); }, vm); ko.applyBindings(vm);

When running in firebug, I get an error from the console that reads:

ReferenceError: text1 is not defined

I should add that I am referencing this fiddle to create my code: http://jsfiddle.net/oliverw/s2VmL/1/

EDIT: The "click:addNote" part of the button was for something else. I forgot to remove it in this snippet as the "addNote" functionality is working just fine. I apologize for the confusion and I thank you all for noticing it. Because of this, it appears that T.J. has answered my question. I had the bindings working improperly within the ViewModel and the bindings were causing conflict.

最满意答案

我想你正在查看一条旧的错误消息。您的问题中显示的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: true用于像上面那样的纯计算 ：  
vm.hasInput = ko.computed({
  pure: true,
  owner: vm,
  read: function() {
    return this.text1();
  }
});
I think you're looking at an old error message. The problem with your VM as shown in your question is that you don't have addNote defined anywhere, but you are trying to bind click to it. 
If you add it and make your btn element an actual button, all is well: 
 
 
  
  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> 
  
 
 
 
Side note: Just completely FWIW, I prefer the new syntax for ko.computed that's a bit more explicit: 
vm.hasInput = ko.computed({
  owner: vm,
  read: function() {
    return this.text1();
  }
});
 
That also lets you specify pure: true for a pure computed like yours above: 
vm.hasInput = ko.computed({
  pure: true,
  owner: vm,
  read: function() {
    return this.text1();
  }
});