Question

我可以创建一个视图模型，使得具有喜爱/不喜欢类型图标的可点击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

但是，当我尝试扩展viewmodel时，也会出现click-toggling行为，它会失败并显示消息：

未捕获的ReferenceError：无法处理绑定＆＃34;： function（）{return FavoritesVm}＆＃34;消息：无法处理绑定＆＃34; foreach：function（）{return favorites（）}＆＃34;消息：无法进程绑定＆＃34;事件：function（）{return {click：toggleFavorite（）}}＆＃34; 消息：未定义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

N.B。：在SO上有一个类似的问题，关于扩展ko.viewmodel以在{root}上添加ko.computed（）。但是，我想为每个{root} .favorite [i]添加一个方法。看到 How can I map a field computed using ko.viewmodel和 http://jsfiddle.net/sublimejs/L6Wm3/8/

Answer 1

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

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

favorites

注意：除了为简单任务使用太多代码之外，您只需切换我的代码中显示的值，即var myOptions = { extend:{"[i]": function(f) { f.toggleFavorite = function() { f.isFavorite(!f.isFavorite()); } } } };

Click to see the working plunker

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

1 个答案: