title: Typescript with Kendo MVVM - To declare as Observable or Not?
body: <p>Using <code>Kendo MVVM</code> with <code>Typescript</code> has been mostly pleasant, but I ran into an issue before and it is rearing its head again... See this question for more details about the original.</p>
  <h3><a href="https://stackoverflow.com/questions/21240818/kendo-ui-mvvm-with-typescript-making-viewmodels-as-classes">Typescript with Kendo MVVM</a></h3>
  <p>The general problem was that I needed to define the array as a <code>kendo.data.ObservableArray</code>. Now here is the issue I am running into ...</p>
  <p>I do not understand when I am supposed to declare a property as observable, or just leave it as normal and let the process be natural. In fact I am gravely confused about the entire ordeal. To cite example ...</p>
  <pre><code>export class Prototype  {
      public Editing: boolean = false;
      public Id: string = &quot;&quot;;
      public Name: string = &quot;&quot;;
      public Mutations: any[] = [];
      public Tags: any[] = [];
      public Conditions: any[] = [];
  
      };
  }
  
  var viewModel = kendo.observable(new Prototype());
  viewModel.Mutations.push({ // new data // });
  </code></pre>
  <p>This WORKS. This is REALLY confusing to me, because I did not extend <code>ObservableObject</code> as in my original example. If I print out the view model, I can see that all of the arrays were converted to <code>ObservableArray</code>, which is exactly what I want.</p>
  <p>But then later, I have a similar situation with a more nested part of the program...</p>
  <pre><code>export class Condition {
      public Label: string = &quot;Pushed Condition&quot;;
      public Parts: observableArray = kendo.observableHierarchy([]);
  
      constructor(data?: any, mapped?: any) {
          for (name in mapped) {
              this[name] = mapped[name];
          }
  
          for (name in data) {
              this[name] = data[name];
          }
      }
  
      public onRemove(e) {
          e.data.parent().remove(e);
      }
  
      public Push(data: any) {
          data.onRemove = e =&gt; {
              e.data.parent().remove(e);
          };
          this.Parts.push(data);
      }
  }
  </code></pre>
  <p>Now then this is where it totally blows my brain out. One of these objects is created as a property on an ObservableArray, but then it does NOT get turned into an observable. So the following ...</p>
  <pre><code>$mutation.Conditions.push(new Condition());
  </code></pre>
  <p>does not behave as observable, and does not update. I have to explicitly do it as ...</p>
  <pre><code>$mutation.Conditions.push(kendo.observable(new Condition()));
  </code></pre>
  <p>But I don't usually have to do this when adding something to the <code>Mutations[]</code> collection. I can just go ...</p>
  <pre><code>viewModel.Mutations.push(new Mutation());
  </code></pre>
  <p>and everything is fine.</p>
  <p>It gets further confusing with the <code>Parts</code> array of Condition. If I declare it as <code>any[]</code>, it does not work - even if I create the Condition with <code>kendo.observable</code>. The only way I was able to make it work is to explicitly declare it as an <code>ObservableArray</code>.</p>
  <p>Can anyone help me make sense of this? I have the program working like I want, but I am vastly confused and I find that declaring these differently in different places is really obtuse, and I don't like it. It will make my code much harder to maintain over time.</p>