2

我可以创建一个视图模型，这样一组带有收藏/非收藏类型图标的可点击 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：

<div data-bind="css: {favorite: isFavorite()==true, 
                      notFavorite: !isFavorite() }  ,
                      event: {click: toggleMe}" 
                      style="border:solid red;">

</div>

plnkr：http ://plnkr.co/edit/LEwQd544rxrzhNyoyO5F?p=preview

但是，我想用 ko.viewmodel 插件达到同样的效果。（好吧，我也希望能够使用 ko.mapping :-)） ko.viewmodel 插件参考在这里：
http ://coderenaissance.github.io/knockout.viewmodel/

扩展使用 ko.viewmodel 创建的视图模型的语法非常简单。这是他们的例子：

options:{ 
    extend:{
        "{root}.users[i]": function(user){
            user.isDeleted = ko.observable(false);
        }
    }
};

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

我可以使用 ko.viewmodel 成功地将数据绑定到我的视图模型：plnkr：http ://plnkr.co/edit/afr9B8lPe1W3jCTrfH3w?p=preview

但是，当我尝试扩展视图模型以使单击切换行为也存在时，它会失败并显示以下消息：

未捕获的 ReferenceError：无法处理绑定“with: function(){return FavoritesVm}”消息：无法处理绑定“foreach: function (){return favorites()}”消息：无法处理绑定“event: function (){ 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：http ://plnkr.co/edit/1gez79Q0kvPlRUYFcOfS?p=preview

注意：在 SO 上有一个与此类似的问题，关于扩展 ko.viewmodel 以在 {root} 上添加 ko.computed()。但是，我想为每个 {root}.favorite[i] 添加一个方法。请参阅 如何映射使用 ko.viewmodel 和 http://jsfiddle.net/sublimejs/L6Wm3/8/计算的字段

4

1 回答 1

1

问题是您直接映射favorites数组，而不是FavoritesVm，因此，您无法指定{root}.favorites[i]，因为您在favorites上下文中，而不是在FavoritesVm上下文中。（即该代码试图favorites在自身内部找到一个属性favorites）

因此，要指定要修改 中的每个元素favorites，您只需要 sepcify "[i]"：

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

注意：除了你为一个简单的任务使用了太多的代码，你可以简单地切换我的代码中显示的值，即f.isFavorite(!f.isFavorite());

点击查看工作中的 plunker

于 2015-05-18T11:29:37.220 回答