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代码。问题是如果在页面加载后插入了类似按钮的div，则Facebook JavaScript库将不会解析它并将其转换为类似按钮。为此，您必须致电FB.XFBML.parse()。

我尝试使用didInsertElement()的{{1}}挂钩，但只有在视图首次插入DOM时才会运行，而不是在它已经存在之后。

我尝试通过向模板添加脚本标记来解决此问题：

Ember.View

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

问题

Ember是否有任何时候运行代码的钩子Metamorph更改已经渲染的Ember视图？
如何在没有破坏Metamorph标签的情况下在Ember模板中编写脚本标签？

Answer 1

您可以在视图中观察变量。所以你会这样做

App.View = Ember.View.extend({
    conditional: null,

    _conditionalChanged: function() {
        console.log('conditional changed');
    }.observes('conditional')
})

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

那就是说，基于你原来的问题，我认为你不应该使用条件来管理状态。您应该在视图中使用StateManager。这样，随着你的facebook按钮的状态改变，不同的动作/事件可以触发。事实上，你应该有一个完全独立的视图负责设置facebook按钮。

Answer 2

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

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

...

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

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

didInsertElement函数。

如果重新渲染Ember视图的某个部分，我该如何运行代码？

问题

2 个答案: