title: Difficulty with Kendo UI MVVM and an Associative Array
body: <p>I am having a difficult time binding a view model using an "Associative Array" with Kendo UI's MVVM. I've attempted to amalgamate a demo together, but it is really hard to when I don't have even a half-working one to go off of. But this is the best I've managed... Here is my code, along with a jsBin to demonstrate. It just doesn't seem to like the idea of an associative array, and I'm not really certain how else to hook into it.</p>
  
  <p>The reason for the associative array is because I am pulling a lot of details out of the database, but they'll need to be invoked in certain places by name. Rather than write a bunch of searching/sorting methods, an associative array is a lot simpler for this. But in a few places where I do need to just list the data outright, it is giving me a great deal of trouble.</p>
  
  <h1><a href="http://jsbin.com/qaput/2/edit" rel="nofollow">jsBin Demo</a></h1>
  
  <h1>Javascript</h1>
  
  <pre><code>var viewModel = new kendo.data.ObservableObject({
    Id: "test/id",
    Associative: new kendo.data.ObservableArray([])
  });
  
  var array = viewModel.get("Associative");
  
  array["One"] = { Id: "id/one" };
  array["Two"] = { Id: "id/two" };
  array["Three"] = { Id: "id/three" };
  
  kendo.bind('body', viewModel);
  </code></pre>
  
  <h1>HTML</h1>
  
  <pre><code>&lt;div data-bind="text: Id"&gt;&lt;/div&gt;
  &lt;div data-template="display-associative-many" data-bind="source: Associative"&gt;&lt;/div&gt;
  
  &lt;script type="text/x-kendo-template" id="display-associaite-many"&gt;
    &lt;div&gt;
      ${ data.Id }
    &lt;/div&gt;
  &lt;/script&gt;
  </code></pre>
  
  <h1>Update</h1>
  
  <p>The data I need to bind to is stored in <code>RavenDB</code> as an <code>IDictionary&lt;string, T&gt;</code>, where <code>T</code> is a specific kind of object (it kind of varies at times, so I can't give you a concrete type - nor is it really relevant)</p>
  
  <p>So it is stored in the database like ...</p>
  
  <pre><code>"Model" : {
     "ONE" : {
        "Id" : "id/one"
     },
     "TWO" : {
        "Id" : "id/two"
     },
     "THREE" : {
        "Id" : "id/three"
     }
  }
  </code></pre>
  
  <p>Obviously there is more data than this, but this is all that is truly relevant at the moment. </p>
  
  <p>While I <strong>do</strong> have the physical ability to change this, it is contrary to many other parts of the program. A lot of various places in the software work already on the premise of this being a dictionary. So I would <em>like</em> to avoid having to change all of that <em>if</em> possible. If that is truly, truly the only way to make this work at all, I will make the change.</p>
  
  <p>What I could do though is do some mapping when it deserializes. My thought now is to assign the <code>key</code> to a new property, <code>Name</code>, and try to kendo bind to that. So the data would become, if my mental image is right ...</p>
  
  <pre><code>Associative: [
     "One" : {
        Name: "One",
        Id: "id/one"
     },
     "Two" : {
       Name: "Two",
       Id: "id/two"
     },
     "Three" : {
       Name: "Three",
       Id: "id/three"
     }
  ]
  </code></pre>
  
  <p>If I understand Kendo's <code>observable</code> system right, that would make it ...</p>
  
  <pre><code>kendo.data.ObservableArray([
     kendo.data.ObservableObject,
     kendo.data.ObservableObject,
     kendo.data.ObservableObject
  ])
  </code></pre>
  
  <p>And as I grasp it, that <strong>should</strong> be possible to model bind ... right?</p>
  
  <h1>Update 2</h1>
  
  <p>Following my own idea, I have made a <strong>somewhat</strong> successful version work with this method... However, I am not entirely sure if this is safe or efficient. I am growing concerned with the performance. I'm still trying to find other ways to achieve this result.</p>
  
  <h2>kendo template</h2>
  
  <pre><code>&lt;script type="text/x-kendo-template" id="display-items-many"&gt;
          # for(var key in data) { #
          #   if (data.hasOwnProperty(key) &amp;&amp; data[key].hasOwnProperty("Id")) { #
          &lt;tr&gt;
              &lt;td&gt;
                  &lt;strong&gt;#= data[key].Id #&lt;/strong&gt;
              &lt;/td&gt;
              &lt;td class="text-right"&gt;
                  &lt;code&gt;#= data[key].Total #&lt;/code&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          #   } #
          # } #
  &lt;/script&gt;
  </code></pre>
  
  <h2>html</h2>
  
  <pre><code>&lt;table class="table borderless table-hover table-condensed" data-bind="source: Associative  data-template="display-items-many"&gt;
  
  &lt;/table&gt;
  </code></pre>