title: bind to filtered object property knockout nested foreach
body: <p>I am trying to understand <code>$parent</code>, <code>$data</code> and stuck trying to filter out object array based on the <code>$parent</code> value. </p>
  
  <pre><code>&lt;p&gt;My kids:&lt;/p&gt;
      &lt;ul data-bind="foreach: kids"&gt;
          &lt;li&gt; &lt;span data-bind="text: $data" &gt;&lt;/span&gt;      
                &lt;ul data-bind="foreach: grandKids.filter(function (obj) { return obj.mother === $parent })"&gt;
                   &lt;li&gt;&lt;span data-bind="text: $data.name"&gt;&lt;/span&gt;&lt;/li&gt;                      
               &lt;/ul&gt;
           &lt;/li&gt;
        &lt;/ul&gt;
  
  
      &lt;script src="Scripts/knockout-3.4.1.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          var vm = {
              name : ko.observable("Anjan"),
              age: ko.observable(40),
              kids: ["Mira", "Teresa"],
              grandKids: [
                           { name: "Andy", mother: "Mira" }, 
                           { name: "Alice", mother: "Mira" }, 
                           { name: "Alex", mother: "Teresa" }, 
                           { name: "Abby", mother: "Teresa" }
                         ]
          };
  </code></pre>