如何将具有子可观察对象的函数绑定到可观察数组？

Question

我有以下 ViewModel：

var Order =  function(data) {
  this.fruits = ko.observableArray(ko.utils.arrayMap(data.Fruis, function(item) { return item; }));
  this.vegetables = ko.observableArray(ko.utils.arrayMap(data.Vegetables, function(item) { return item; }));
};

我需要定义一些绑定到具体实例的子属性和子可观察对象，以及水果和蔬菜的一些常用方法，：

var Items =  function(data, type) {
  var self = this;
  self.type = type;
  self.choice = ko.observable(-1);
  self.choice.select = ko.computed(function(){
    var id = self.choice();
    // do stuff
  });
  self.choice.remove = function() {
    var id = self.choice.peek();
    // do stuff
  };
  self.add = function(code) {
    //do stuff
    self.choice(id);
  };
};

这是绑定包含我的一组方法和子可观察对象的函数的正确方法，以便我可以使用如下方法：

orderViewModel.fruits.add("apples");
orderViewModel.fruits.add("bananas");
orderViewModel.fruits.choice(0);
orderViewModel.fruits.choice.remove();

console.log(ko.tpJSON(orderViewModel));
// prints: {fruits: [bananas], vegetables: []};

我认为没有必要使用 extenders，因为属性和方法不是通用的，并且不需要对所有 observables 都是通用的。

我尝试从我的 Item 函数返回一个可观察数组，但我无法让它工作，因为子属性和子可观察对象已经丢失。如何将Items 绑定到我的可观察数组？

Answer 1

即使您可能不想创建扩展器，但您在这里所做的是扩展可观察数组...

如果你不想注册扩展程序，你可以创建一个小的帮助函数来创建一个observableArray，并在返回之前为其添加一些方法和属性。

在下面的示例中，您可以看到一些示例代码。一些重要的建议：

• 如果您使用这种方法，我建议不要覆盖observableArray 中的默认方法。例如：remove 默认取一个项目；您希望它与外部 choice 索引一起使用...最好选择一个不同的名称，以便继续支持两者。
• 如果您最终经常使用该扩展，那么创建一个在内部存储可观察数组的干净视图模型可能是值得的。您可以定义一个toArray 方法来导出到普通数组。

var obsCollection = function(initialItems) {
  
  var items = ko.observableArray(initialItems);
  
  items.choice = ko.observable(-1);
  items.add = items.push;
  
  var ogRemove = items.remove.bind(items);
  
  // I'd rename this to "deleteChoice"
  items.remove = function() {
    var index = items.choice();
    ogRemove(items()[index]);
    // Reset choice to -1 here?
  };
  
  
  return items;
};

var fruits = obsCollection(["Apple"]);

log(fruits);
fruits.add("Banana");
fruits.choice(0);
fruits.remove();
log(fruits);
fruits.remove();
fruits.add("Mango");
fruits.add("Lemon");
log(fruits);

function log(d) {
  console.log(JSON.stringify(ko.unwrap(d)));
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

编辑以澄清this的使用（缺乏）：

由于我们不使用new 关键字，因此没有必要使用this。在内部，observableArray 创建了一个new 实例，但我们引用此实例的唯一方法是通过items。从数组中分离原型方法时，我们需要确保使用正确的上下文调用它们，通过 bind 或 .call(items)（或 apply）。

如果您希望代码看起来像“类”，您可以这样做：var self = items; 并继续使用 self 关键字，或者将其重写为使用 new 关键字（我的答案中的最后一个要点)。

var myArray = ko.observableArray([1,2,3]);

try {
  // Reference the function without binding `this`:
  var removeFromMyArray = myArray.remove;

  // Internally, the observableArray.prototype.remove method
  // uses `this` to refer to itself. By the time we call it,
  // `this` will refer to `window`, resulting in an error.
  removeFromMyArray(2);
} catch(err) {
  console.log("ERROR:", err.message);
  console.log(myArray());
}


// By binding to the array, we ensure that the function reference
// is always called in the right context.
var boundRemoveFromMyArray = myArray.remove.bind(myArray);
boundRemoveFromMyArray(2);
console.log(myArray());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>