How can I run code at any time when part of the Ember view is re-viewed?

Question

My goal is to have a Facebook button that can conditionally display in Ember mode. My template:

{{#if condition}} Click Like: <div class="fb-like fb_edge_widget_with_comment fb_iframe_widget" data-href="http://www.facebook.com/obnob" data-send="false" data-layout="button_count" data-width="100" data-show-faces="false"></div> {{else}} Nothing to like here! {{/if}} 

If the condition changes over the life of the page, the HTML code for the button will be inserted and removed accordingly. The problem is that if after the page loads, a div button of a similar button is inserted, the Facebook JavaScript library will not parse it and turn it into a similar button. To do this, you must call FB.XFBML.parse() .

I tried using didInsertElement() hook Ember.View , but this only Ember.View when the view is first inserted into the DOM, and not after it already exists.

I tried to fix this by adding a script tag to the template:

 <script>FB.XFBML.parse();</script> 

This failed because the script tag interferes with the Metamorph script tags.

Questions

• Does Ember have a hook to run code anytime Metamorph changes the Ember view that has already been shown?
• How do you write script tags in an Ember template without merging Metamorph tags?

Answer 1

You can define a view for your button and execute any custom logic in the didInsertElement function. Example:

 {{#if condition}} {{view App.LikeButton}} 

...

 App.LikeButton = Em.View.extend({ templateName: 'like-button', didInsertElement: function() { //apply you custom logic here } }) 

Function

didInsertElement will be called every time after rendering the visualization and adding it to the DOM.

Answer 2

You can observe the variables inside your view. So you would do

 App.View = Ember.View.extend({ conditional: null, _conditionalChanged: function() { console.log('conditional changed'); }.observes('conditional') }) 

And this will allow you to skip code when changing your conditional code.

However, based on your original problem, I don't think you should use a conditional expression to control the state. You should look at the StateManager in your view. Thus, as the state of your facebook button changes various actions / events, it may fire. In fact, you should have a completely separate view responsible for setting up the facebook button.