Ember视图的某个部分如何重新运行？ [英] How can I run code any time part of an Ember view is rerendered?

问题描述

我的目标是拥有一个可以有条件地出现在Ember视图中的Facebook的按钮。我的模板是：

My goal is to have a Facebook like button that can conditionally appear in an Ember view. My template is:

{{#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}}

如果条件在页面使用期间进行更改，相应地将插入和删除类似按钮的HTML代码。问题是，如果在页面加载之后插入类似按钮的div，那么Facebook JavaScript库将不会解析它并将其转换成类似的按钮。为此，您必须调用 FB.XFBML.parse（）。

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

我尝试使用 didInsertElement（）钩子 Ember.View ，但这只在视图首次插入到DOM中时运行，而不是在它已经

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

我尝试通过在模板中添加脚本标签来解决此问题：

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

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

由于脚本风格干扰了Metamorph的脚本标签，因此失败。

This failed because the script tage interferes with Metamorph's script tags.

1. Ember有没有挂钩运行代码Metamorph更改已经呈现的Ember视图？ / li>
   
2. 如何在Ember模板中编写脚本标签，如果没有破坏Metamorph的标签？

推荐答案

您可以为按钮定义视图，并在 didInsertElement 函数中执行任何自定义逻辑。例如：

You can define a view for your button, and do 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
    }
})

didInsertElement function每次渲染视图后都会被调用，并将其添加到DOM。

didInsertElement function will be called each time after view is rendered and added to the DOM.

这篇关于Ember视图的某个部分如何重新运行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！