使用 Ember.js 和 EmberFire 生成表单

Question

我有一个由{{#each}} 循环生成的表，它显示用户的名字和姓氏。我想添加一个删除按钮来删除该行上的记录。我也在使用 EmberFire 连接 Firebase。

将该行中的数据与删除按钮相关联的最佳方式是什么？

以下是我的相关代码：

index.html

{{#each}}
  <tr>
    <td>
      {{this.first}}
    </td>
    <td>{{this.last}}</td>
    <td>
      <button>X</button>
    </td>
  </tr>
{{/each}}

router.js

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return EmberFire.Array.create({
      ref: new Firebase(FirebaseRef + 'testObj')
    });
  },
  renderTemplate: function() {
    this.render('index');
    this.render('users', { 
      outlet: 'users',
      into  : 'index'
    });
  }
});

controller.js

App.IndexController = Ember.ArrayController.extend({
  actions: {
    register: function() {
      this.pushObject({
        'first' : this.get('firstName'),
        'last'  : this.get('lastName')
      });
    }
  }
})

谢谢！

Answer 1

您可以向 IndexController 添加删除操作：

App.IndexController = Ember.ArrayController.extend({
  actions: {
    register: function() {
      this.pushObject({
        'first' : this.get('firstName'),
        'last'  : this.get('lastName')
      });
    },
    delete: function(person) {
        this.content.removeObject(person);
    }
  }
})

然后将以下内容添加到您的 index.html：

{{#each}}
  <tr>
    <td>
      {{this.first}}
    </td>
    <td>{{this.last}}</td>
    <td>
      <button {{action "delete" this}}>X</button>
    </td>
  </tr>
{{/each}}