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

问题

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.

回答1:

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>

回答2:

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.

来源：https://stackoverflow.com/questions/26601737/how-to-add-a-a-dynamic-row-to-table-on-click-of-a-button-and-make-the-existing

标签

javascript

ember.js