title: Accessing objects within viewmodel Knockout
body: <p>I'm using knockout for a single page app that does some basic calculations based on several inputs to then populate the value of some html . In an attempt to keep my html concise I've used an array of objects in my viewModel to store my form. I achieved the basic functionality of the page however I wish to add a 'display' value to show on html that has formatted decimal points and perhaps a converted value in the future. </p>
  
  <p>I'm not sure of a 'best practices' way of accessing the other values of the object that I'm currently 'in'. For example: If I want my display field to be a computed value that consists of the value field rounded to two decimal places.</p>
  
  <pre><code>display: ko.computed(function()
  {
    return Math.round(100 * myObj.value())/100;
  }
  </code></pre>
  
  <p>I've been reading through the documentation for knockout and it would appear that managing this is a common problem with those new to the library. I believe I could make it work by adding the computed function outside of the viewmodel prototype and access the object by</p>
  
  <pre><code>viewModel.input[1].value()
  </code></pre>
  
  <p>However I would imagine there is a cleaner way to achieve this.</p>
  
  <p>I've included a small snippet of the viewModel for reference. In total the input array contains 15 elements. The HTML is included below that.</p>
  
  <pre><code>var ViewModel = function()
  {
    var self = this;
    this.unitType = ko.observable('imperial');
    this.input = 
    [
      {
        name: "Test Stand Configuration",
        isInput: false
      },
      {
        name: "Charge Pump Displacement",
        disabled: false,
        isInput: true,
        unitImperial: "cubic inches/rev",
        unitMetric: "cm^3/rev",
        convert: function(incomingSystem)
        {
          var newValue = this.value();
          if(incomingSystem == 'metric')
          {
            //switch to metric
            newValue = convert.cubicinchesToCubiccentimeters(newValue);   
          }
          else
          {
            //switch to imperial
            newValue = convert.cubiccentimetersToCubicinches(newValue);
          }
          this.value(newValue);
        },
        value: ko.observable(1.4),
        display: ko.computed(function()
        {
          console.log(self);
        }, self)
      }
    ]
  };
  </code></pre>
  
  <p>__</p>
  
  <pre><code>&lt;!-- ko foreach: input --&gt;
      &lt;!-- ko if: $data.isInput == true --&gt;
      &lt;div class="form-group"&gt;
              &lt;div class="col-sm-6"&gt;
                      &lt;label class="control-label" data-bind="text: $data.name"&gt;&lt;/label&gt;
              &lt;/div&gt;
              &lt;div class="col-sm-6"&gt;
                  &lt;div class="input-group"&gt;
                  &lt;!-- ko if: $data.disabled == true --&gt;
                      &lt;input data-bind="value: $data.value" type="text" class="form-control" disabled&gt;
                  &lt;!-- /ko --&gt;
                  &lt;!-- ko if: $data.disabled == false --&gt;
              &lt;input data-bind="value: $data.value" type="text" class="form-control"&gt;
                  &lt;!-- /ko --&gt;
                  &lt;!-- ko if: viewModel.unitType() == 'imperial'--&gt;
              &lt;span data-bind="text: $data.unitImperial" class="input-group-addon"&gt;&lt;/span&gt;
                  &lt;!-- /ko --&gt;
                  &lt;!-- ko if: viewModel.unitType() == 'metric' --&gt;
              &lt;span data-bind="text: $data.unitMetric" class="input-group-addon"&gt;&lt;/span&gt;
                  &lt;!-- /ko --&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
      &lt;/div&gt;
  &lt;!-- /ko --&gt;
  &lt;!-- ko if: $data.isInput == false --&gt;
  &lt;div class="form-group"&gt;
      &lt;div class="col-sm-6"&gt;
              &lt;h3 data-bind="text: $data.name"&gt;&lt;/h3&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- /ko --&gt;
  </code></pre>