title: How to bind a function with sub-observables to an observable array?
body: <p>I have following ViewModel:</p>
  
  <pre><code>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; }));
  };
  </code></pre>
  
  <p>I need to define some sub-properties and sub-observables bound to the specific instance, and some common methods for fruits and vegetables,:</p>
  
  <pre><code>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);
    };
  };
  </code></pre>
  
  <p>Which is the right way to bind the function containing my set of methods and sub-observables, so that i can use the methods as follows:</p>
  
  <pre><code>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: []};
  </code></pre>
  
  <p>I think there is no need to use <em>extenders</em>, as the properties and methods aren't generic, and don't need to be common to all observables.</p>
  
  <p>I tried by returning an observable array from my Item function, but i wasn't able to get this to work, as sub-properties and sub-observables have been lost. How can i bind <code>Items</code> to my observable arrays?</p>