title: Kendo, How do you bind MVVM text: fields to a remote DataSource?
body: <p>I have an example of this working for local values defined in the viewmodel (observable) class constructor, but it does not seem to work when you have a remote datasource.</p>
  
  <p><a href="http://jsfiddle.net/hbuNP/7/" rel="nofollow">http://jsfiddle.net/hbuNP/7/</a></p>
  
  <p>How could I get an example similar to the one below working for remote datasources, is it even possible?</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id='root'&gt;
      &lt;label&gt;Remote Name: &lt;/label&gt; 
      &lt;span data-bind="text: firstName"&gt;&lt;!--firstName--&gt;&lt;/span&gt;, 
      &lt;span data-bind="text: lastName"&gt;&lt;!--lastName--&gt;&lt;/span&gt;
  
      &lt;div&gt;
          &lt;label&gt;Remote Name: 
              &lt;input data-bind="value: firstName" /&gt;,
              &lt;input data-bind="value: lastName" /&gt;
          &lt;/label&gt; 
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;br/&gt;
  &lt;br/&gt;
  &lt;div id='local-root'&gt;
      &lt;label&gt;Local Name: &lt;/label&gt;
      &lt;span data-bind="text: firstName"&gt;&lt;/span&gt;, 
      &lt;span data-bind="text: lastName"&gt;&lt;/span&gt;
  
      &lt;div&gt;
          &lt;label&gt;Local Name: 
              &lt;input data-bind="value: firstName" /&gt;,
              &lt;input data-bind="value: lastName" /&gt;
          &lt;/label&gt; 
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;br/&gt;
  &lt;br/&gt;
  &lt;div id='test-ajax'&gt;
      &lt;pre&gt;
      &lt;/pre&gt;
  &lt;/div&gt;
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>$(document).ready(function(){
      /**
      * #local-root example, binds to local data like in the examples
      */
      var personLocalViewModel = kendo.observable({
          firstName: 'James',
          lastName: 'Taylor'
      });
  
      kendo.bind($('#local-root'), personLocalViewModel);
  
      /** 
      * set's up a mock api endpoint for jquery and other libraries
      */
      $.mockjax({
          url: "js/data/person.json",
          contentType: "application/json",
          responseText: {
              firstName: 'James',
              lastName: 'Taylor'
          }
      });
  
      /**
      * test-ajax - proves mockajax works
      */
      $.ajax({
          url: "js/data/person.json",
          dataType:'json',
          success:function(response){
              $('#test-ajax pre').text(JSON.stringify(response));
          }
      });
  
  
      /**
      * #root or remote-root, this dataSource is not bidning to the html, why?
      */
      console.log('KENDO.js', kendo.data);
      var personSource = new kendo.data.DataSource({
          transport: {
              read: {
                  url: "js/data/person.json",
                  dataType: "json"
              }
          },
          schema:{
              parse: function(response){
                  console.log('personSource.schema.parse',response);
                  return response;
              },
              data: function(response){
                  console.log('personSource.schema.data',response);
                  return response;
              }
          }
      });
  
      //would this work?
      var personViewModel = kendo.observable({
          dataSource: personSource
      });
  
      //would this work?
      var personViewModel2 = kendo.observable(personSource);
  
      kendo.bind($('#root'), personViewModel);
  
  
  });
  </code></pre>