title: Data-bind an array element as value using knockout
body: <p>Is there a way to bind a array element as a value of a input or a select?</p>
  
  <p>Something like this...</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var ViewModel = function() {
    var self = this;
  
    self.array = ko.observableArray([undefined, undefined, undefined]);
  
    self.text = ko.computed(function() {
      return self.array()[0] + self.array()[1] + self.array()[2];
    });
  }
  
  var viewModel = new ViewModel();
  ko.applyBindings(viewModel);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"&gt;&lt;/script&gt;
  &lt;input data-bind="value: $root.array[0]" /&gt;
  &lt;input data-bind="value: $root.array[1]" /&gt;
  &lt;input data-bind="value: $root.array[2]" /&gt;
  &lt;p data-bind="text: $root.text"&gt;&lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>EDIT</strong></p>
  
  <p>Sorry guys, I'm really terrible to make questions, but my problem is a little more tricky, My real entries are selects that is a filter of an array and the values selecteds. like this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var ViewModel = function() {
    var self = this;
    self.family = ko.mapping.fromJS(data.family);
  
    self.array = ko.observableArray([ko.observable(undefined), ko.observable(undefined), ko.observable(undefined)]);
  
    self.filterFamily1 = function() {
      return self.family().filter(function(i) {
        return i.parent() == null;
      });
  
    }
    self.filterFamily2 = ko.computed(function() {
      return ko.utils.arrayFilter(self.family, function(i) {
        return i.parent() === self.array()[0]().name();
      });
  
    });
     self.filterFamily3 = ko.computed(function() {
      return ko.utils.arrayFilter(self.family, function(i) {
        return i.parent() === self.array()[1]().name();
      });
  
    })
  
  }
  
  var data = {
    family: [{
      name: "John",
      parent: null
    }, {
      name: "Mary",
      parent: null
    }, {
      name: "Erick",
      parent: "John"
    }, {
      name: "Paul",
      parent: "John"
    }, {
      name: "Marshall",
      parent: "Mary"
    }, {
      name: "Ross",
      parent: "Paul"
    }]
  };
  
  var viewModel = new ViewModel();
  ko.applyBindings(viewModel);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"&gt;&lt;/script&gt;
  
  &lt;select data-bind="options: $root.filterFamily1(),optionsText: 'name', value: $root.array()[0]"&gt;&lt;/select&gt;
  &lt;select data-bind="options: $root.filterFamily2(),optionsText: 'name', value: $root.array()[1]"&gt;&lt;/select&gt;
  &lt;select data-bind="options: $root.filterFamily3(),optionsText: 'name', value: $root.array()[2]"&gt;&lt;/select&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>but the answers were right for the problem that I describe before. </p>