如何在一个按钮上单击一个动态行添加一个动态行，并使用Ember点击使现有行可编辑 [英] 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.

另外，如何在点击添加按钮上动态添加行。我知道如何使用jQuery，但不知道在余烬。

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

谢谢！

我想在Ember中模拟这种行为。

I want to emulate this kind of behaviour in Ember.

http://jsbin.com/codeso/1/edit?html,js,output 这个jsbin有一个表，和一个按钮。单击按钮时，动态行将添加到表中，列为文本框，以便用户可以输入数据，按另一个按钮即可保存。

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.

推荐答案

我想你的表绑定到一个ArrayController的模型。

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

 }

然后在您的Handlebars模板中p>

Then in your Handlebars template

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

这篇关于如何在一个按钮上单击一个动态行添加一个动态行，并使用Ember点击使现有行可编辑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！