关于如何在ember加载完模板后触发事件问题？

Question

问题很简单，可是我网上却始终没有找到方法。
事情是这样的，比如我有个模板类似如此

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>

我在模板加载完后要执行脚本如下

$(function(){$('button').tooltip();});

但我在route与controller中均未找到触发模板加载完后的事件，不知道在ember的应用中类似的脚本（在dom都加载完成后）该如何处理，在何处被触发？

Answer 1

经过一天的努力，自己找到了解决方案，但由于对ember不熟悉不保证是最好的解决方案如果你有更好的方案请不吝告知。
问题是这样的项目采用ember+bootstrap的方式，其中用到bootstrap中tooltip的javascript组件，但tooltip组件采用了data-api的方式将数据绑定在html标签中，只能在dom加载进页面后手动触发$.tooltip方法来实现。
我找到的方案是采用在ember中运用view的didInsertElement事件，该事件将在把view中的html加载到文档后触发。
一下是我的部分实现代码：
模板代码

<form class="form-horizontal" role="form" {{action "add" on="submit" }}>
{{#view App.TooltipView}}
<div class="form-group">
    <label for="inputModuleName" class="col-sm-2 control-label">栏目名称</label>
    <div class="col-sm-10">
        {{input class="form-control" id="inputModuleName" placeholder="栏目名称" value=inputModuleName data-toggle="tooltip" data-placement="right" title="Tooltip on right"}}
    </div>
</div>
<div class="form-group">
    <label for="inputSubModule" class="col-sm-2 control-label">子栏目</label>
    <div class="col-sm-10">
        {{input class="form-control" id="inputSubModule" placeholder="子栏目ID" value=inputSubModule}}
    </div>
</div>
<div class="form-group">
    <label for="inputModuleRoute" class="col-sm-2 control-label">路由地址</label>
    <div class="col-sm-10">
        {{input class="form-control" id="inputModuleRoute" placeholder="路由地址" value=inputModuleRoute}}
    </div>
</div>
<div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
        <button type="submit" class="btn btn-primary">提交</button>&nbsp;
        <a class="btn btn-default" href="#/module">返回</a>
    </div>
</div>
{{/view}}</form>

其中用了自定义的TooltipView来包裹需要加载后处理的html代码。

TooltipView的实现代码：

App.TooltipView = Ember.View.extend({
didInsertElement: function () {
    var tooltipElements = $(this.findElementInParentElement(this.elementId)).find('[data-toggle="tooltip"]');
    tooltipElements.tooltip();
}});

其主要功能是查找带有“data-toggle=tooltip”的html元素并对该元素调用tooltip完成组件初始化工作。

Answer 2

你的解法思路是对的，利用 View 的 didInsertElement 钩子来操作 DOM。不过最好不要直接用 View 来扩展，而是把 Tooltip 写成一个 Component。View 是 Ember 很多 UI 组件的底层实现，而 Component 则是其中的一个高级接口，也是应对你题目中场景最推荐的办法。其实 Component 就是一个扩展的 View，不过比 View 更适合封装可重用的 UI 组件。