How to add a a dynamic row to table on click of a button, and make the existing rows editable on click using Ember

Question

I want to edit the table rows, so for that on click, I want to make the columns as text boxes so that I can edit, and save.

Also, how to add rows dynamically on click of add button. I know how to do using jQuery, but no idea in ember.

Thanks!

I want to emulate this kind of behaviour in Ember.

http://jsbin.com/codeso/1/edit?html,js,output this jsbin has a table, and a button. On clicking of button a dynamic row gets added in table with columns as text-boxes so that the user can enter data, which on pressing another button can be saved.

What've you tried so far? Have a look on ember guide documentation. — Hasib Mahmud, Oct 28 '14 at 07:28
Welcome to Ember :) Do spend time on ember guide as @HasibMahmud suggested. Do watch the video here http://emberjs.com/guides/ . Please put some effort and provide jsbin with your work if you have any doubt — Susai, Oct 28 '14 at 08:02
@HasibMahmud I'm not sure how to add dynamic rows using Ember. I can prepopulate a table with model data. I've added a JSBin to show what kind of behaviour I need. Let me know what should I do to achieve that! — Stuarty, Nov 03 '14 at 19:11

score 1 · Answer 1 · answered Oct 28 '14 at 07:58

I suppose your table is bound to a model of an ArrayController.

 <table>
 ...
 {{#each element in model}}
    <tr>
       <td>{{element.name}}</td>
       ...
    </tr>
 {{/each}}
 ...

In your controller add an action

 // inside controller
 actions: {
    addElement: function() {
        var elements = this.get('model'), // model contains the data/list for the rows
            newElement = /* here your object creation code */;

        elements.pushObject(newElement);
    }

 }

Then in your Handlebars template

 <button {{action "addElement"}}>Add row</button>

Thanks a lot! But I cannot add object in controller, I need to take the input for this object from User only, in UI. Can you please look at this JSBin. I want to emulate this kind of behaviour. I updated the question too. http://jsbin.com/codeso/1/edit?html,js,output — Stuarty, Nov 03 '14 at 18:55

score 0 · Answer 2 · answered Aug 31 '15 at 14:38

I'm working on this same thing now. My idea is to have a row with the inputs before the {#each} block, and make it visible when the user chooses to add a row. This row will have cancel (simply make the row invisible) and save buttons. Only when the user saves is something like splattne's addElement() called.

This way, I don't have to try to add row and form markup dynamically, which is really just an HTML/Javascript thing, and the Ember action is only for when data actually needs to get added to the backend.

How to add a a dynamic row to table on click of a button, and make the existing rows editable on click using Ember

2 Answers2

Linked