title: Best way to bind textfield to a model in ember
body: <p>I am trying to figure out how to bind model to textfield so that when the value in the text-field is updated, the underlying model is also updated(and send PUT request to proper API). From the documentation ember-data seems to be capable to doing this, but I couldn't connect my custom text field to controller/model.</p>
  
  <p>Here is how my models look:</p>
  
  <pre><code>AS.Run = DS.Model.extend({
  'analyticsPlan' : DS.attr('string'),
  'commandScript' : DS.attr('string'),
  'parameters'    : DS.hasMany('parameter')
  });
  
  AS.Parameter = DS.Model.extend({
  'name'          : DS.attr('string'),
  'type'          : DS.attr('string'),
  'description'   : DS.attr('string'),
  'value'         : DS.attr('string'),
  'default'       : DS.attr('string'),
  'analyticRun'   : DS.belongsTo("run")
  });
  </code></pre>
  
  <p>And here is my template:</p>
  
  <pre><code>&lt;table style="width:100%;" class="affi-table"&gt;
          &lt;thead&gt;
              &lt;tr class="ui-state-default"&gt;
                  &lt;th style="width:120px;"&gt;Parameter Type&lt;/th&gt;
                  &lt;th style="width:120px;"&gt;Parameter Name&lt;/th&gt;
                  &lt;th&gt;Description&lt;/th&gt;
                  &lt;th&gt;Default value&lt;/th&gt;
                  &lt;th&gt;Value&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
                {{#each parameter in parameters}}
                  &lt;tr&gt;
                      &lt;td&gt;{{parameter.type}}&lt;/td&gt;
                      &lt;td&gt;{{parameter.name}}&lt;/td&gt;
                      &lt;td&gt;{{parameter.description}}&lt;/td&gt;
                      &lt;td&gt;{{parameter.default}}&lt;/td&gt;
                      &lt;td&gt;{{view AS.AnalyticsParameterTextField valueBinding="parameter.value" placeholder="" nameBinding="parameter.name" style="width:200px;"}}&lt;/td&gt;
                  &lt;/tr&gt;
                {{/each}}
          &lt;/tbody&gt;
      &lt;/table&gt;
  </code></pre>
  
  <p>AnalyticsParameterTextField is defined as:</p>
  
  <pre><code>AS.AnalyticsParameterTextField = Ember.TextField.extend({
  attributeBindings: ['name','style'],
  
  focusOut: function(evt) {
      var paramName = this.get('name');
      var paramValue = this.value;
  
      console.log(this.get('controller'));//this returns &lt;AS.AnalyticsParameterTextField:ember568&gt; which is not the controller
      //this was working before when I was not using ember model objects, but when I was just pulling the json data right out from a rest end point
  
  }
  });
  </code></pre>
  
  <p>I could really use some help in figuring out how to get the controller in AnalyticsParameterTextField. Once that is sorted out, I need to figure out how to update the underlying model and also make server API requests to update the database. I think I can make ajax request to update the underlying database but in ember-data version 1 I think I can probably use something like this in my controller:</p>
  
  <pre><code>var p = this.get('store').find('parameter',somekey)  
  p.save();
  </code></pre>
  
  <p><strong>UPDATE :</strong></p>
  
  <p>I got things to work for now using the example provided in <a href="https://stackoverflow.com/questions/15162869/ember-textfield-valuebinding-with-dynamic-property">Ember TextField valueBinding with dynamic property</a>
  But it seems likes there must be a better approach to solve this.</p>
  
  <p>My template looks like:</p>
  
  <pre><code>{{#each parameter in parameters}}
    &lt;tr&gt;
      &lt;td&gt;{{parameter.type}}&lt;/td&gt;
      &lt;td&gt;{{parameter.name}}&lt;/td&gt;
      &lt;td&gt;{{parameter.description}}&lt;/td&gt;
      &lt;td&gt;{{parameter.default}}&lt;/td&gt;
      &lt;td&gt;{{view AS.AnalyticsParameterTextField paramValueBinding="parameterValue" valueBinding="parameter.value" placeholder="" nameBinding="parameter.name" style="width:200px;"}}&lt;/td&gt;
  &lt;/tr&gt;
  {{/each}}
  </code></pre>
  
  <p>The textfield code looks like:</p>
  
  <pre><code>AS.AnalyticsParameterTextField = Ember.TextField.extend({
  attributeBindings: ['name','style'],
  paramValue : {},
  updateValues: function() {
      var name = this.get('name');
      var val = this.value;
      this.set('paramValue',{"name":name,"value":val});
  }.observes('value')
  });
  </code></pre>
  
  <p>And my controller looks like:</p>
  
  <pre><code>AS.AnalyticsConfigController = Ember.ObjectController.extend({
  
  runId : null,
  parameterValue : null,
  
  /*
  * This function is called every time a parameter is updated/changed.
  * It makes API call to appropriate rest end point("/analytics/runs/:runId/parameters/:name" to be specific)
  */
  updateRunParameter:function(){
      var store = this.get('store');
      var runId = this.get('runId');
  
      /*
      * defining namespace rule for the "parameter" model here because the namespace depends on the dynamic parameter value "runId"
      */
      AS.ParameterAdapter = DS.RESTAdapter.extend({
          namespace: AS.baseURL.substr(1)+"analytics/runs/"+runId
      });
  
      store.find('parameter', 'historyDir').then(function(parameterObject) {
          //once the promise is resolved, save the parameter object
          parameterObject.save();
      });
  }.observes('parameterValue')
  });
  </code></pre>
  
  <p>But I must say I detest this approach, there must be a cleaner way to do this. Right now when the text field value gets updated, it updates its own property which in turn updates the controller property and then controller watches this property to make appropriate API calls.</p>