如何在重新绘制Ember视图的任何部分时运行代码

Question

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

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

如果condition在页面生命周期内发生更改，则类似按钮的HTML代码将相应地插入和删除。问题是，如果在页面加载后插入like按钮的div，Facebook JavaScript库将不会解析它并将其转换为like按钮。要执行此操作，必须调用FB.XFBML.parse()。

我尝试使用Ember.View的didInsertElement()钩子，但这仅在视图首次插入DOM时运行，而不是在它已经存在之后。

我试图通过在模板中添加一个脚本标签来解决这个问题：

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

这失败了，因为脚本阶段干扰了Metamorph的脚本标记。

问题

1. Ember是否有一个钩子，可以在Metamorph更改已经渲染的Ember视图时运行代码
2. 如何在Ember模板中编写脚本标签，而不会破坏Metamorph的标签

Answer 1

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

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

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

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

Answer 2

您可以观察视图中的变量。所以你会做

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

这将允许您在条件更改时激发代码。

也就是说，基于你最初的问题，我认为你不应该使用条件来管理状态。您应该考虑在视图中使用StateManager。这样，当你的facebook按钮的状态发生变化时，不同的动作/事件可能会触发。事实上，你应该有一个完全独立的视图来负责设置facebook按钮。