Knockout.js 在每个数组元素上扩展ko.viewmodel失败

我可以创建一个视图模型，这样一组可单击的div（带有收藏夹/非收藏夹类型图标）就可以正常工作。我使用knockout绑定css样式，它具有适当的背景图像集。 最喜欢的功能是：

function Favorite() {

  var self = this;
  self.isFavorite = ko.observable();
  self.toggleMe = function(ctx) {
    self = ctx;
    var val = self.isFavorite();
    self.isFavorite(!val);
  };
  self.isFavoriteClass = ko.computed(function() {

    if (self.isFavorite() === true)
      return 'favorite';
    else
      return 'notFavorite';
  });
}

HTML:

我可以使用ko成功地将数据绑定到我的视图模型。viewmodel: plnkr：

但是，当我尝试扩展viewmodel以同时出现单击切换行为时，它失败，并显示以下消息：

未捕获引用错误：无法处理绑定“”，原因是： 函数（）{return FavoritesVm}消息：无法处理绑定 “foreach:function（）{return favorites（）}”消息：无法 进程绑定“事件：函数（）{return{click:toggleFavorite（）}” 消息：未定义toggleFavorite

这是我尝试使用的选项对象：

var myOptions = { 
    extend:{
        "{root}.favorites[i]": function(favorite){
            favorite.toggleFavorite = ko.computed(function() {
              debugger; 
                // self = this;
                // var val = self.isFavorite();
                // self.isFavorite(!val);
                // return favorite;
                var val = this.isFavorite();
                this.isFavorite(!val);
                return favorite;
              }, this);
        }
    } 
}; 

plnkr：

注意：关于扩展ko.viewmodel在{root}上添加一个ko.computed（），有一个与此类似的问题。但是，我想为每个{root}.favorite[I]添加一个方法。看见 和

---

问题在于，您直接映射的是

收藏夹

数组，而不是

收藏夹SVM

，因此，您不能指定

{root}.favorites[i]

，因为您在

收藏夹

上下文中，而不是

收藏夹SVM

上下文中。（即，该代码尝试在

收藏夹

自身中查找

收藏夹

属性）

因此，要指定要修改

收藏夹中的每个元素，只需指定“[i]”：

注意：除了在一个简单的任务中使用太多的代码外，您还可以简单地切换我的代码中显示的值，即
f.isFavorite（！f.isFavorite（））

我可以通过引用此处的家长来修复您的plunker？您引用的链接处的plnkr无效。目标是通过单击红色边框div中包含的图形来切换这些图形（当然，还要切换基础视图模型属性，.isFavorite（）。我给出的以下链接中的plnkr显示了正确的切换行为，但是它使用的是完全手动创建的视图模型。我想通过使用由ko.viewmodel创建的视图模型以及一些手工编码的扩展来实现这一点。
options:{ 
    extend:{
        "{root}.users[i]": function(user){
            user.isDeleted = ko.observable(false);
        }
    }
};

viewmodel = ko.viewmodel.fromModel(model,options));

var myOptions = { 
    extend:{
        "{root}.favorites[i]": function(favorite){
            favorite.toggleFavorite = ko.computed(function() {
              debugger; 
                // self = this;
                // var val = self.isFavorite();
                // self.isFavorite(!val);
                // return favorite;
                var val = this.isFavorite();
                this.isFavorite(!val);
                return favorite;
              }, this);
        }
    } 
}; 

var myOptions = { 
  extend:{"[i]": function(f) {
      f.toggleFavorite = function() {
        f.isFavorite(!f.isFavorite());
      }
    }
  } 
};