CODEWITHSUNDEEP
ember.jsfirebase
manisha
manisha

Reputation: 607

Ember Data and Firebase Where is my Id

I'm having trouble understanding how to update a record in an Ember.js that uses EmberFire and Firebase.

I have a small test application built to try to understand all of the CRUD functions. I can return a list of tasks that have been created, create a new task, and delete a task. But I cannot correctly update a record in a list.

When I look in the inspector, on my index page, I see that in the Ember debugger, under Data, it shows my model, and there is an Id field that contains the value that Firebase generated when a record was created on the server.

But when I console log the object that is getting passed to my Update Action in the route, there is no Id attribute. I think that is why I get an error of:

Error: no record was found at https://taskline.firebaseio.com/tasks/id

When hitting this piece of code:

export default Ember.Route.extend({
    model: function () {
    return this.store.findAll('task');
    },

    actions: { 

    updateTask: function (model) {
      console.log(JSON.parse(JSON.stringify(model)));
      this.store.findRecord('task', 'id').then(function(task){
        task.set( 'taskname', model.taskname);
        task.set( 'startdate', model.startdate);
        task.set( 'enddate',  model.enddate);
        task.set( 'banding',  model.banding);
        return task.save();
      });
    },

Ember Fire is supposed to handle the Id isn't it? But if it's not in my model object, how am I supposed to pass it to the find query?

Upvotes: 1

Views: 728

Answers (1)

Zoltan
Zoltan

Reputation: 4966

When you would like to update a model, one of the best option to pass the record back from the template/controller to the route action. In this case the record will be ready in your function param, so your updateTask method would look like this (only):

updateTask(record) {
  record.save();
}

The whole process:

Firstly, in the Route handler download all records, as you did in your example, and implement the action:

import Ember from 'ember';

export default Ember.Route.extend({

  model() {
    this.store.findAll('task');
  },

  actions: {
    updateTask(task) {
      task.save();
    }
  },

});

Secondly, in your template list each task with input box. Maybe it could be a table. (I just have one field here taskname, but you could have more, of course.)

    <table>
      <thead>
        <th>ID</th>
        <th>Taskname</th>
        <th>Action</th>
      </thead>
      <tbody>
        {{#each model as |task|}}
          <tr>
            <td>{{task.id}}</td>  
            <td>{{input value=task.taskname}}</td>
            <td><button {{action 'updateTask' task}}>Update</button>
          </tr>
        {{/each}}
      </tbody>
    </table>

As you see, you are sending back the task record to the updateTask action in your route, so we are able to save it immediately. You can learn all these tricks in this free tutorial, which focuses on the Ember Way and uses Firebase: http://yoember.com

Upvotes: 2

Related Questions