Refresh Content

Ember Data
1

Hi,

I’m using the latest versions of Ember and Ember-Data with a small API to learn. I have Ember display a table with elements and there’s an option to delete a record. Delete works fine, except the table doesn’t get updated. I’ve tried with transitionToRoute(‘index’) but nothing happens.

Template:

<script type="text/x-handlebars" data-template-name="index">
   {{#each}}
      {{id}}. {{name}}
   {{/each}}
</script>

Route:

App.IndexRoute = Ember.Route.extend({
   model: function() {
      return this.store.find('sample');
   }
});

Controller:

App.SampleDeleteModalController = Ember.ObjectController.extend({
  actions: {
    remove: function() {
    	// Two ways
    	this.get('model').destroyRecord(); 
    	this.transitionToRoute('index');
    }
  }
});

Any idea on how I may get this to work properly?

2

@xBlack this looks generally correct, but is missing the part of the code that triggers the removal. Could you recreate the issues in a jsbin for us? http://emberjs.jsbin.com/ If you can do that I think the cause could be tracked down pretty quickly.

3

Inside {{#each}} I have a button:

<button class='btn' {{action 'showModal' 'sample-delete-modal' this}}><i class='fa fa-trash-o'></i></button>

As I said, the action triggers fine and the record is deleted properly. I’m not sure if I can create the jsbin because I’m using the RESTAdapter and because the confirmation button is on a modal, so it’s more complex.

The modal template is:

<script type="text/x-handlebars" data-template-name="sample-delete-modal">
  {{#my-modal title='Delete Record' ok='remove' close='removeModal'}}
    <p>Delete <b>{{name}}</b>?</p>
  {{/my-modal}}
</script>

Isn’t there something I have to do after the delete to refresh or re-render the table?

Thanks

4

Here is an attempt to build it in jsbin.

http://emberjs.jsbin.com/dolasuto/4/edit?js,console,output

Didn’t really work with my modal setup, but it’s much simpler this way.

Also, I’m using destroyRecord() in my app, and it does delete the record, but here doesn’t work.

5

The remove action in the jsbin was already sending the sample, you can just call destroyRecord on that:

http://emberjs.jsbin.com/dolasuto/5/edit?html,js,console,output

Maybe you need to evolve the bin more to get closer to your original issue? This was a pretty easy thing to clean up, take a look.

6

I’m using the bootstrap modal to ask for confirmation before deleting. I can’t get the modal to work on jsbin or jsfiddle. But this is the idea: http://emberjs.jsbin.com/dolasuto/8/edit and maybe it helps. Thanks a lot mixonic.

7

I haven’t been able to fix this problem. Moreover, today I run into a similar issue. I have a search box where a user can enter something and search. It works fine the first time, but the second the view does not get refreshed but I can see the data coming if I use {{log this}}. Obviously, I must be doing something wrong. (It works if I have the Ember Extension open - I guess it forces the refresh).

The workflow of this is as follows: From the Index go to Client. Here there is an search box. Enter something and press a button. Button has action ‘search’ which is defined in ClientController which does transitionToRoute('client.search'). The route client.search only has

model: function(params) {
    return this.store.find('client', { name: params.keyword, limit: 25, orderby: 'id desc' });
}

What am I missing? Why is the data retrieved but the view not updated? (I’ve already tried to create a jsbin with this, but I can never get it to work at all.)

8

I solved this problem by adding an empty route:

App.ClientLoadingRoute = Ember.Route.extend();

Can anyone explain why this fixes the issue? I was able to find the solution after noticing that if I opened Ember Inspector and clicked on the Routes tab, the search would magically work.