首页 > 关于如何在ember加载完模板后触发事件问题?

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

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

<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都加载完成后)该如何处理,在何处被触发?


经过一天的努力,自己找到了解决方案,但由于对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完成组件初始化工作。


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

【热门文章】
【热门文章】