Generating Forms with Ember.js and EmberFire

Question

I have a table thats generated by an {{#each}} loop and it displays user's first and last names. I want to add a delete button to delete the record on that row. I am also using EmberFire to connect with Firebase.

What is the best way to associate the data in that row with that delete button?

Heres the wee bit of relevant code I have:

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

Thanks!

score 4 · Accepted Answer · answered Feb 11 '14 at 17:47

You could add a delete action to your 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);
    }
  }
})

Then add the following to your index.html:

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

Yup, that did it! I had assumed that I would need to do some sort of manual data binding to each row and it's button. I guess I'll chock this one up to Ember's magic :) Thanks! — JDillon522, Feb 11 '14 at 20:29

Generating Forms with Ember.js and EmberFire

1 Answers1