title: WinJS.Binding multiple sources
body: <p>I'm new to data binding, but it looked like an easy way to achieve what I need to do. </p>
  
  <p>My problem (as you can see) is that I have two (or more) of these boxes with different data on each page. The code works fine, but it <strong>displays the same thing in both divs</strong>.</p>
  
  <p>Here's my sample code:</p>
  
  <p><em>Javascript:</em></p>
  
  <pre><code>var people = {
     name: "Jeff",
     age: 37,
     location: "New Jersey"
  }
  
  var animals = {
     name: "Kiki",
     age: 2,
     location: "Canada"
  }
  
  var elementPeople = document.getElementById("peopleBox");
  var bindingSrcPeople = WinJS.Binding.as(people);
  
  var elementAnimals = document.getElementById("animalBox");
  var bindingSrcAnimals = WinJS.Binding.as(animals);
  
  .
  .
  .
  
  WinJS.Binding.processAll(elementPeople, bindingSrcPeople);
  WinJS.Binding.processAll(elementAnimals, bindingSrcAnimals);
  </code></pre>
  
  <p><em>HTML:</em></p>
  
  <pre><code>&lt;div id="peopleBox"&gt;
    &lt;div class="" data-win-bind="textContent:name"&gt;&lt;/div&gt;
    &lt;div class="" data-win-bind="textContent:location"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;div id="animalBox"&gt;
    &lt;div class="" data-win-bind="textContent:name"&gt;&lt;/div&gt;
    &lt;div class="" data-win-bind="textContent:location"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Any help would be appreciated. Thank you very much.</p>