Databases
StackOverflow2013
Postsdbo
POBest way to bind textfield to a model in ember
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POBest way to bind textfield to a model in ember
    primarykey
    data
    text
    <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>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USCommunity
    1. USDeewendra Shrestha
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POBest way to bind textfield to a model in ember
      1. This table or related slice is empty.
      1. VTUpMod
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload