# Model not updating on route

**URL:** <https://discuss.emberjs.com/t/model-not-updating-on-route/6420>\
**Category:** Uncategorized\
**Created:** [October 5, 2014, 6:31am UTC](https://discuss.emberjs.com/t/model-not-updating-on-route/6420 "2014-10-05T06:31:59Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![xBlack](https://avatars.discourse-cdn.com/v4/letter/x/96bed5/32.png) [@xBlack](https://discuss.emberjs.com/u/xBlack)\
**Post date:** [October 5, 2014, 6:31am UTC](https://discuss.emberjs.com/t/model-not-updating-on-route/6420/1 "2014-10-05T06:31:59Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![jasonmit](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/jasonmit/32/182_2.png) [@jasonmit](https://discuss.emberjs.com/u/jasonmit)\
**Post date:** [October 5, 2014, 8:41am UTC](https://discuss.emberjs.com/t/model-not-updating-on-route/6420/2 "2014-10-05T08:41:03Z")

</div>

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

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

```

```hbs
{{#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](http://jsfiddle.net/NQKvy/1349/)

---

<div class="post-metadata">

**Author:** ![xBlack](https://avatars.discourse-cdn.com/v4/letter/x/96bed5/32.png) [@xBlack](https://discuss.emberjs.com/u/xBlack)\
**Post date:** [October 5, 2014, 2:40pm UTC](https://discuss.emberjs.com/t/model-not-updating-on-route/6420/3 "2014-10-05T14:40:51Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![jasonmit](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/jasonmit/32/182_2.png) [@jasonmit](https://discuss.emberjs.com/u/jasonmit)\
**Post date:** [October 5, 2014, 6:59pm UTC](https://discuss.emberjs.com/t/model-not-updating-on-route/6420/4 "2014-10-05T18:59:43Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![xBlack](https://avatars.discourse-cdn.com/v4/letter/x/96bed5/32.png) [@xBlack](https://discuss.emberjs.com/u/xBlack)\
**Post date:** [October 5, 2014, 7:48pm UTC](https://discuss.emberjs.com/t/model-not-updating-on-route/6420/5 "2014-10-05T19:48:43Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![jasonmit](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/jasonmit/32/182_2.png) [@jasonmit](https://discuss.emberjs.com/u/jasonmit)\
**Post date:** [October 5, 2014, 8:54pm UTC](https://discuss.emberjs.com/t/model-not-updating-on-route/6420/6 "2014-10-05T20:54:19Z")

</div>

> [@xBlack](#):
>
> I don’t think any filtering is required.

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.

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

```

---

<div class="post-metadata">

**Author:** ![xBlack](https://avatars.discourse-cdn.com/v4/letter/x/96bed5/32.png) [@xBlack](https://discuss.emberjs.com/u/xBlack)\
**Post date:** [October 5, 2014, 9:17pm UTC](https://discuss.emberjs.com/t/model-not-updating-on-route/6420/7 "2014-10-05T21:17:16Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![jasonmit](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/jasonmit/32/182_2.png) [@jasonmit](https://discuss.emberjs.com/u/jasonmit)\
**Post date:** [October 5, 2014, 9:26pm UTC](https://discuss.emberjs.com/t/model-not-updating-on-route/6420/8 "2014-10-05T21:26:33Z")

</div>

Still can’t reproduce it [Ember Data Canary - JSFiddle - Code Playground](http://jsfiddle.net/KvjpQ/32/)

---

<div class="post-metadata">

**Author:** ![jasonmit](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/jasonmit/32/182_2.png) [@jasonmit](https://discuss.emberjs.com/u/jasonmit)\
**Post date:** [October 5, 2014, 10:13pm UTC](https://discuss.emberjs.com/t/model-not-updating-on-route/6420/9 "2014-10-05T22:13:14Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![xBlack](https://avatars.discourse-cdn.com/v4/letter/x/96bed5/32.png) [@xBlack](https://discuss.emberjs.com/u/xBlack)\
**Post date:** [October 5, 2014, 11:08pm UTC](https://discuss.emberjs.com/t/model-not-updating-on-route/6420/10 "2014-10-05T23:08:17Z")

</div>

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