4

我的目标是有一个 Facebook like 按钮，可以有条件地出现在 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().

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

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

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

这失败了，因为脚本标签干扰了 Metamorph 的脚本标签。

问题

  1. 每当 Metamorph 更改已渲染的 Ember 视图时，Ember 是否有运行代码的挂钩？
  2. 如何在 Ember 模板中编写脚本标签而不破坏 Metamorph 的标签？
4

2 回答 2

2

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

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

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

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

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

于 2012-08-25T14:36:21.117 回答
2

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

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

...

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

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

于 2012-08-25T20:08:12.470 回答