Capture Multiple TextBox values in controller using Ember View

Question

Hi I am working on a form using emberJS and this is my Application Controller

 App = Ember.Application.create();

 App.ApplicationController = Ember.Controller.extend({
    appName: 'Tag Editor',
    arrayVal : ['A', 'B', 'C', 'F', 'X'],
    actions: {
    formSubmit: function() {
         console.log(this.get('views'));
    }
   }
});

And my templates I am using application application template, and Based on array mentioned in applicationcontroller emberview will be rendered as per App.TextView

  <script type="text/x-handlebars" data-template-name="application">
    <div {{bind-attr class=":appName"}}><h1>{{appName}}</h1></div>
    {{#each arrayVal}}
     <div>
      {{view App.TextView entity=this}}
    </div>
   {{/each}}
   <div>
   <button {{action 'formSubmit'}}>Submit</button>
  </div>
</script>

//The above template will render all the textBoxes in the template as per the bellow template,

//My TextBoxView will contain 2 textboxes firstName and lastName

 <script type="text/x-handlebars" data-template-name="myentity-view">
     <div class="appTitle">{{input type=text value=firstName}}</div>
     <div class="appTitle">{{input type=text value=lastName}}</div>
 </script>

view of the above template

    App.TextView = Ember.View.extend({
        templateName: 'myentity-view'
    });

This will be working fine by rendering all the textBox views in the application templates by each Helper and dynamically creating all the views

//But for me in each View I want to capture all the entries of firstName and lastName of the User on clicking the formSubmit in applicationController.

In the current scenario, my arrayVal length is 5 and it will dynamically create 5 TextViews as per my code. and in each TextView there is a firstName and lastName , How can I will capture all the firstName and lastNames in Controller action

blessenm blessenm · Accepted Answer · 2015-05-26T01:17:14

You can access the views using this.get('childViews'). You may want to filter the result using some unique property in the TextView so that other childViews are ignored. Then you basically map the whole array and return firstName and lastName.

formSubmit: function() {
  var values = this.get('childViews')
    .filterBy('templateName', 'myentity-view')
    .map(function(item) {
      return {
        firstName: item.get('firstName'),
        lastName: item.get('lastName')
      };
    });
}

Here is a working demo.

Capture Multiple TextBox values in controller using Ember View

1 Answers