Model not updating on route

1

I have a page where I display a table from DS model and I have the option to remove or add. It works perfectly.

The issue I’m running into is, when I put this on a route (resource ‘client’ has header and some controls and route is under resource) it doesn’t work. For instance, I have multiple routes under the same resource. So on client.index I display the model and I have a delete button which fires properly on the REST and actually deletes the record (I’m using destroyRecord()). The problem is that is not updated on the table. Same happens when I add a new record. If I refresh the page the data is there but no changes are visible until I refresh.

I tried creating a jsbin with an example, but it only happens with the REST adapter.

Is there anything special I have to do for this kind of case? Perhaps access the data differently?

2

I am assuming your controller is an ArrayController, but this is generally how it’s done.

App.ClientController = Ember.ArrayController.extend({
  filteredContent: function () {
        return this.filterBy('isDeleted', false);
    }.property('@each.isDeleted')
});

{{#each filteredContent}} 
  {{! bind to filteredContent instead on your table }}
{{/each}}

Same happens when I add a new record.

This is the part that confuses me, can you post an example in a jsfiddle or something isolating the issue. It seems data-binding is entirely broken, which may be due to malformed html breaking the databinding.

Rough example of what I am talking about: Ember Latest - JSFiddle - Code Playground

3

Thanks for the example.

I think I forgot to mention something. When I press the add or remove button, a modal is displayed, and so the action is handle on that modal controller. For example, this is the action to remove the client:

App.RemoveClientModalController = Ember.ObjectController.extend({
    actions: {
	remove: function() {
		this.get('model').destroyRecord();
	}
     }
});

I have the exact same setup for some data that I display on the resource directly, instead of resource/route and it works perfectly.

Any ideas?

4

That should be fine so filtering by isDeleted would still work here. Can you show me how you’re filtering?

5

I don’t think any filtering is required.

{{#each}}
    <tr>
      <td>{{user}}</td>
      <td>{{email}}</td>
      <td><button class='btn btn-xs btn-danger' {{action 'showModal' 'remove-client-modal' this}}>
             <i class='fa fa-trash-o fa-lg'></i></button>
      </td>
    </tr>
{{/each}}

This is how I go over the model in client.index. Again, if I have this in client it works just fine.

6

That depends if you’re bound to a DS.RecordArray or not

You do need to wrap your {{#each}} with a tbody if you are using a table, or you will lose data-binding because the HTML is not semantically correct.

It’s hard to help without a link to the code or a fiddle, I can only guess.

<table>
   <tbody>
      {{#each}}
         <tr>
            <td>{{foo}}</td>
         </tr>
      {{/each}}
   </tbody>
</table>
7

I should have just pasted the template. Here is the entire client.index template:

<div class="row clearfix">
    <div class="col-md-12 column">
        <table class="table table-bordered table-hover">
            <thead>
                <tr>
                    <th>User</th>
                    <th>Email</th>
                </tr>
            </thead>
            <tbody>
                {{#each}}
                    <tr>
                        <td>{{user}}</td>
                        <td>{{email}}</td>
                        <td><button class='btn btn-xs btn-danger' {{action 'showModal' 'remove-client-modal' this}}><i class='fa fa-trash-o fa-lg'></i></button>
                        </td>
                    </tr>
                {{/each}}
            </tbody>
        </table>
    </div>
</div>

I think I’m not missing any tags and it should be valid HTML. What else could I look for?

8

Still can’t reproduce it Ember Data Canary - JSFiddle - Code Playground

9

In case someone else runs into this, we worked offline to solve this. xBlack was using arrangedContent on an ArrayController and not observing model.@each.isDeleted so arrangedContent would not refire the computed when xBlack destroyed the record.

10

@jasonmit was very helpful. Also should note that for adding arrangedContent should observe model.[].