Как добавить динамическую строку в таблицу одним нажатием кнопки и сделать существующие строки редактируемыми при нажатии, используя Ember

Question

Я хочу отредактировать строки таблицы, поэтому для этого я хочу сделать столбцы текстовыми полями, чтобы их можно было редактировать и сохранять.

Также, как динамически добавлять строки по нажатию кнопки добавления. Я знаю, как сделать с помощью jQuery, но понятия не имею в Ember.

Спасибо!

Я хочу подражать такому поведению в Эмбер.

http://jsbin.com/codeso/1/edit?html,js,output этот jsbin имеет таблицу и кнопку. При нажатии кнопки в таблицу добавляется динамическая строка со столбцами в виде текстовых полей, чтобы пользователь мог вводить данные, которые при нажатии другой кнопки можно сохранить.

Answer 1

Я полагаю, что ваша таблица связана с моделью ArrayController.

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

В вашем контроллере добавьте действие

 // 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);
    }

 }

Тогда в вашем шаблоне Handlebars

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

Answer 2

Сейчас я работаю над тем же. Моя идея состоит в том, чтобы иметь строку с входами до {#each} заблокировать, и сделать его видимым, когда пользователь решит добавить строку. Эта строка будет иметь отмену (просто сделать строку невидимой) и кнопки сохранения. Только когда пользователь сохраняет что-то вроде splattne's addElement() называется.

Таким образом, мне не нужно пытаться динамически добавлять разметку строк и форм, что на самом деле просто HTML/Javascript, а действие Ember предназначено только для случаев, когда данные действительно должны быть добавлены в бэкэнд.