title: Using knockoutJS, how to bind list items to same view?
body: <p>I am new to Knockout and I am building a Simple POC for using knockout to build SPA(Single Page Application).</p>
  
  <p>What I want to do is to show "Business Units" when the app loads and on selection of a business unit show all "Front End Units" under that business unit and on selection of a front end unit, show all "Sales Segments" under that front end unit. </p>
  
  <p>All this will happen in a single page using the same view and the viewmodel will bind the model based on selected business unit or front end unit.</p>
  
  <p>The issue I am facing is that, I have 5 business units that get bound properly first on document ready, but on selection of business unit, the front end units get repeated 5 times each. In this case, I have 2 front end units and each is shown 5 times. Same issue on selection of front end unit. </p>
  
  <p>You can see this issue mimicked in the following jsFiddle sample - <a href="http://jsfiddle.net/shyamayana/5B9Fd/" rel="nofollow">jsFiddle Link</a></p>
  
  <p>Let me know if you can't access the jsfiddle link.  In this sample, I have used arrays, but in actual I will be getting the data through async call to the oData service.</p>
  
  <p>This is the view HTML:</p>
  
  <pre><code>&lt;div id="divbu"&gt;
      &lt;h4 data-bind="text: Heading"&gt;&lt;/h4&gt;
      &lt;ul data-role="listview" data-inset="true" data-bind="foreach: Collection"&gt;
          &lt;li data-role="list-divider" data-bind="text: EntityName"&gt;&lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="#" data-bind="click: $root.fnNextLevel"&gt;
                          &lt;table border="0"&gt;
                              &lt;tr&gt;
                                  &lt;td&gt;
                                      &lt;label style="font-size: 12px;"&gt;Bus. Plan: &lt;/label&gt;
                                  &lt;/td&gt;
                                  &lt;td&gt;
                                      &lt;label style="font-size: 12px;" data-bind="text: BusinessPlan"&gt;&lt;/label&gt;
                                  &lt;/td&gt;
                                  &lt;td&gt;
                                      &lt;label style="font-size: 12px;"&gt;Forecast: &lt;/label&gt;
                                  &lt;/td&gt;
                                  &lt;td&gt;
                                      &lt;label style="font-size: 12px;" data-bind="text: Forecast"&gt;&lt;/label&gt;
                                  &lt;/td&gt;
                              &lt;/tr&gt;
                              &lt;tr&gt;
                                  &lt;td&gt;
                                      &lt;label style="font-size: 12px;"&gt;Gross Sales: &lt;/label&gt;
                                  &lt;/td&gt;
                                  &lt;td colspan="3"&gt;
                                      &lt;label style="font-size: 12px;" data-bind="text: GrossSales"&gt;&lt;/label&gt;
                                  &lt;/td&gt;
                              &lt;/tr&gt;
                          &lt;/table&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is the model and view model: </p>
  
  <pre><code>function CommonModel(model, viewType) {
   var self = this;
   if (viewType == 'BU') {
       self.EntityName = model[0];
       self.BusinessUnit = model[0];
       self.BusinessPlan = model[1];
       self.Forecast = model[2];
       self.GrossSales = model[3];
   } else if (viewType == 'FEU') {
       self.EntityName = model[1];
       self.BusinessUnit = model[0];
       self.FrontEndUnit = model[1];
       self.BusinessPlan = model[2];
       self.Forecast = model[3];
       self.GrossSales = model[4];
   } else if (viewType == 'SS') {
       self.EntityName = model[2];
       self.BusinessPlan = model[3];
       self.Forecast = model[4];
       self.GrossSales = model[5];
   }
  
  }
  
  function ShipmentReportsViewModel(results, viewType) {
  
   var self = this;
   self.Collection = ko.observableArray([]);
  
   for (var i = 0; i &lt; results.length; i++) {
       self.Collection.push(new CommonModel(results[i], viewType));
   }
   if (viewType == 'BU') {
       self.Heading = "Business Units";
       self.fnNextLevel = function (businessUnit) {
           FetchFrontEndUnits(businessUnit);
       };
       self.Home = function () {
           FetchBusinessUnits();
       };
  
   } else if (viewType == 'FEU') {
  
       self.Heading = results[0][0];
       self.fnNextLevel = function (frontEndUnit) {
           FetchSalesSegments(frontEndUnit);
       };
       self.Home = function () {
           FetchBusinessUnits();
       };
   } else if (viewType == 'SS') {
       self.fnNextLevel = function () {
           alert('No activity zone');
       };
       self.Heading = results[0][0] + ' - ' + results[0][1];
       self.Home = function () {
           FetchBusinessUnits();
       };
   }
  
  }
  </code></pre>
  
  <p>You can see the complete code in the jsFiddle link.</p>
  
  <p>I have also tried this with multiple views and multiple view models, where I apply bindings by giving the element ID.  In this case, one flow from business unit -> sales segment is fine, but when I click on home or back button and I do binding again to that element, I face the same issue. (home and back button features are not done in jsFiddle example).</p>
  
  <p>Let me know if more details are required.  I did look into lot of other links in stack overflow, but nothing addressing this particular problem.</p>
  
  <p>Any help is deeply appreciated. Thanks in advance.</p>