title: Kendo MVVM - Simple Value Binding to a DataSource
body: <p>I want to learn how to bind an input on a page to a data source, in Kendo MVVM. To start simply, say I have the following html:</p>
  
  <pre><code>&lt;div id="configDiv"&gt;
      Call:&lt;input data-bind="value: SystemCall" type="text" /&gt;&lt;br /&gt;
      &lt;button data-bind="click: save"&gt;Save&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the following view model: </p>
  
  <pre><code>var self = this;
  
      var Model = kendo.data.Model.define({
          id: "SystemId",
          fields: {
              SystemCall: { editable: true }
          }
      });
  
          self.ViewModel = kendo.observable({
              dataSource: new kendo.data.DataSource({
                  transport: {
                      read: "/api/ServiceApi?method=Ref/SystemConfig/",
                      type: "GET"
                  },
                  schema: {
                      model: Model
                  }
              }),
              save: function (e) {
                  alert("save config");
              },
          });
          kendo.bind($("#configDiv"), self.ViewModel);
  </code></pre>
  
  <p>The idea is that the value of SystemCall returned in json format from the read url would be bound to the input field in the html. Something is wrong
  because this doesn't work. I have scoured the net looking for a simple example to do nothing more complex than this, and can't find it. Any help in how to get started would be
  greatly appreciated.</p>