knockout.js ul li 数据绑定不正确

Question

HTML

<h4>People</h4>
<ul data-bind="foreach: people">
    <li>      
        <span data-bind="text: name"> </span>
        <a href="#" data-bind="click: $parent.removePerson">Remove</a>
    </li>
</ul>
<button data-bind="click: addPerson">Add</button>                      
<input type="text" data-bind="value: cardtext" /><br /><br /><br />

JS

function AppViewModel() {
    var self = this;
    self.cardtext=ko.observable();


   self.people = ko.observableArray([
       { name: 'Bert' },
       { name: 'Charles' },
       { name: 'Denise' }
   ]);

   self.addPerson = function() {
      self.people.push({ name: self.cardtext });
   };

   self.removePerson = function() {
      self.people.remove(this);
   }
}     
ko.applyBindings(new AppViewModel());

这是结果

问题是文本框不断添加新元素，但之前新添加的元素不断被新元素更新。

第三个元素是第三个元素

第 4 个元素是第 4 个元素

当我添加第 5 个元素时，第 3 个和第 4 个元素被第 5 个元素更新。
为什么会这样？我做错了什么？我不知道。

Answer 1

你只需要在self.cardtext()的末尾添加()。如果您不放置括号，它将做的是将 cardtext 的可观察对象而不是其值推送到数组。因此，当您从文本框中修改 cardtext 时，它也会修改之前推送的对象。

   
function AppViewModel() {
  var self = this;
  self.cardtext=ko.observable();
  self.people = ko.observableArray([
    { name: 'Bert' },
    { name: 'Charles' },
    { name: 'Denise' }
  ]);

  self.addPerson = function() {
    self.people.push({ name: self.cardtext() });
  };

  self.removePerson = function() {
    self.people.remove(this);
  }
}     
ko.applyBindings(new AppViewModel());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<h4>People</h4>
<ul data-bind="foreach: people">
  <li>      
    <span data-bind="text: name"> </span>
    <a href="#" data-bind="click: $parent.removePerson">Remove</a>
  </li>
</ul>
<button data-bind="click: addPerson">Add</button>                      
<input type="text" data-bind="value: cardtext" /><br /><br /><br />

knockout.js ul li 数据绑定不正确

knockout.js ul li databinding not proper

asp.net-mvc

knockout.js

knockout-3.0

asp.net-core-mvc