检查observableArray中是否存在某个项目

时间:2015-04-11 21:24:43

标签: javascript knockout.js

为什么检查重复Artist始终返回false

有关可运行的演示,请参阅此JSFiddle

淘汰赛代码

$(function() {

  function Artist(name) {
    this.name = name;
  }

  function ViewModel() {
    var self = this;
    self.favoriteArtists = ko.observableArray([]);
    self.artistToAdd = ko.observableArray("");
    self.addArtist = function () {
      var newFavoriteArtist = new Artist(self.artistToAdd());
      console.log("New Favorite Artist: " + newFavoriteArtist.name);
      var artistExists = self.favoriteArtists.indexOf(newFavoriteArtist) > 0;
      console.log("Artist Exists: " + artistExists);
      if(!artistExists) {
          self.favoriteArtists.push(newFavoriteArtist);
          console.log("A new artist has been added:" + self.artistToAdd());
      } else {
        console.log("Artist already in favorites.");
      }
    };
  }  
  ko.applyBindings(new ViewModel());
});

HTML

<h1>Favorite Artists</h1>
<p>Currently, your favorite artists include:</p>
<ul data-bind="foreach: favoriteArtists">
    <li> <span data-bind="text: name"></span>
    </li>
</ul>
<p>Enter the name of a new artist:</p>
<input data-bind="value: artistToAdd" />
<button data-bind="click: addArtist">Add</button>

5 个答案:

答案 0 :(得分:5)

不确定,但是 self.favoriteArtists.indexOf(newFavoriteArtist)&gt; 0; 看起来有点奇怪,我期待那里有-1。如果你经常添加相同的艺术家,它会一直认为它不存在。

并且你不断制作新的对象,这些对象不在列表中。 (复杂)对象默认情况下彼此不相等。

答案 1 :(得分:5)

您的支票应该是以下之一:

self.favoriteArtists.indexOf(newFavoriteArtist) >= 0

self.favoriteArtists.indexOf(newFavoriteArtist) != -1

self.favoriteArtists.indexOf(newFavoriteArtist) > -1

您要检查它是否大于零。这意味着,如果它位于第0位,artistExists将设置为false,因为零不大于零。

但是,这仍然无法奏效。数组中填充了Artist个对象,无法正常搜索,因为您搜索的对象与数组中的对象不同,即使它们具有相同的name

答案 2 :(得分:3)

您可以过滤数组并检查其长度是否为零。如果它不为空,则包含该项目。

return favoriteArtists.filter(function(data) {
      return data === newFavoriteArtist;
    }).length !== 0;

答案 3 :(得分:1)

看看这部分代码:

var newFavoriteArtist = new Artist(self.artistToAdd());
// ...
var artistExists = self.favoriteArtists.indexOf(newFavoriteArtist) > 0;

每次创建新对象(new Artist)。然后你试图在旧对象列表中找到新对象(favoriteArtists) - 这里你的代码没有按预期工作。

相反,您可以添加一些其他功能,允许您按名称(或其他一些独特属性)查找艺术家,并澄清此项目之前是否已添加。

答案 4 :(得分:0)

最好是在找到第一个元素后停止迭代而不是遍历所有集合(所以使用find,而不是过滤器):

return favoriteArtists.find(function(data) {
  return data === newFavoriteArtist;
}) !== null;