如何在单击按钮时将动态行添加到表中，并使用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

本文关键字：单击 Ember 编辑 按钮 动态 添加      更新时间：2023-09-26

我想编辑表行，因此，在单击时，我想将列设置为文本框，以便编辑和保存。

此外，还介绍了如何在单击"添加"按钮时动态添加行。我知道如何使用jQuery，但对ember一无所知。

谢谢！

我想效仿Ember的这种行为。

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

我假设您的表绑定到了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>

我现在正在做同样的事情。我的想法是在{#each}块之前有一个带有输入的行，并在用户选择添加行时使其可见。此行将具有取消（只需使行不可见）和保存按钮。只有当用户保存时，才会调用类似splatne的addElement()的东西。

这样，我就不必尝试动态添加行和表单标记，这实际上只是HTML/Javascript的事情，Ember操作只适用于实际需要将数据添加到后端的情况。

相关文章：