javascript - 学习knockoutjs - 值不添加到数组

Question

我最近开始学习knockoutjs(我认为它很棒。)但是，在摆弄它并学习如何添加到数组中时，我陷入了困境，需要一点帮助。 Fiddle can be found here

这是我的 html 代码:

 <h3>We need more animals</h3>

  <form data-bind="submit: addAnimal">
      <input type="text" data-bind="value: animalToAdd, valueUpdate: 'afterkeydown'"/>
      <button type="submit">Add animal</button>
  </form>

  <select data-bind="options: animalArray, optionsText: 'name'"></select>

  <p data-bind="text: selectedAnimal"></p>

这是我的knockoutjs代码:

function viewModel(){
var self = this;
self.animalArray = ko.observableArray([
    {
         name: 'elephant'
    },
    {
         name: 'dog'
    },
    {
         name: 'cat'
    }
 ]);

  self.animalToAdd = ko.observable();
  self.addAnimal = function(){
      if(self.animalToAdd() != ''){
          self.animalArray.push(self.animalToAdd());
          self.animalToAdd('');
      }
      alert(self.animalToAdd());
   }
   }
 ko.applyBindings(viewModel);

出于某种原因，我无法将新动物插入当前的动物数组中 - 我并不是 100% 我做错了什么，因为它放入了值，而不是文本。

任何帮助都会很棒:)

Answer 1

• 第一个错误，您缺少 selectedAnimal 的定义，但由于您在 text 绑定(bind)中使用它，因此您的代码已损坏
• 第二个错误，animal 有一个结构 { name: 'elephant' } 但你像 self.animalArray.push(self.animalToAdd() 一样推送)，所以即使你push，你也不会在select中看到任何东西。

Updated JSFiddle

指针

• Knockout 为 value:animalToAdd, valueUpdate:'afterkeydown' 添加了新的绑定(bind)，称为 textInput。这是在 KO 3.2 中引入的，因此如果您使用的是该版本之上的版本，请使用它。