Redraw part of a template when binding changes

1

When using the ‘each’ helper in templates ember takes care of adding and removing the view for each element. I want to to do the same thing except that I want ember to redraw the view when only a single item changes.

With a collection

{{#each item in items}}
    {{my-component item=item}}
{{/each}}

with a single item

{{#using item}}
    {{my-component item=item}}
{{/using}}

where ‘using’ is my fantasy helper that forces it’s body to redraw when the binding changes. The important aspect of the ‘each’ example is the the didInsertElement and willRemoveElement hooks get called on my-component (this doesn’t happen using the ‘with’ helper for instance).

I realise I could rewrite my-component to remove and insert using an observer instead of the didInsertElement/willRemoveElement hooks, I’m curious really as to whether there’s an easy way to do it (the other dodgy hack is to wrap the item in an array and just use the ‘each’ helper).

2

I use a non ideal technique for this right now for my social components (twitter, facebook, al) that needs to be reloaded.

Basically, I wrap them in a {{#if}} and change the condition to false. Then I schedule to turn it to true “afterRender”. The result is a complete view removal and recreation.

Is that what you are talking about?

3

Ha, yeah that would do it. I did try ‘if’ but I didn’t think of using the afterRender hook to allow it time to remove the view. Wrapped in a component that seems pretty reasonable (although I’m to dive into ‘if’ and see if there’s a more direct way to do it).

4

You could do something along the lines of observing item and calling this.rerender when the object it’s observing changes.

Edit: Ember Latest - JSFiddle - Code Playground (slight modification)

5

@jasonmit ah that’s perfect, I hadn’t seen that method, thanks!

6

But why do you want to force the component to rerender completely?

I’m curious, I don’t imagine a use case in which you could want this behavior instead of observing some variable/property and doing something when it changes. Or simply do that in the clearRender hook of the parent view/component…

7

It’s to accommodate the tokbox api(Webrtc api), it’s lifecycle is bound to the dom I.e. If you want to add a caller you have to give tokbox an element to bind to. When you remove a caller tokbox tears down the dom. The only way to do this with ember is to use the didInsertElement/willDestroyElement hooks. Note that I’m not a fan of the tokbox api for exactly this reason, but it is what it is…