文档章节

如何在Ember2.0及以上版本模板中使用script标签

ubuntuvim
 ubuntuvim
发布于 2016/05/20 00:17
字数 1421
阅读 70
收藏 0

文章来源:http://blog.ddlisting.com/

Ember2.0不再支持直接在模板中使用script标签,也就是说不能在模板中直接插入script代码段了!官方的建议是尽可能把所有的js代码都放在app/index.html中。但是实际项目中可能会遇到这样的问题:

实现方式一

在某个子模板中使用jQuery方法为某个元素增加了单击的监听事件,比如下面的代码:

$(function() {
    $("#elemId").click(function() {
        // 处理
    });
});

当你通过link-to进入到此子模板(比如:http://localhost:4200/#/about)的时候上述的监听代码并不能有效触发,因为进入模板的时候并不会刷新页面,Ember只是把元素插入到{{outlet}}占位符位置上(可以想象成是使用js动态添加HTML标签到某个元素上)。但是进入子模板后你手动刷新当前页面后上述的js代码却能有效触发!

可见通过link-to进入的页面并不会重新加载页面,那么如何解决呢?在2.0版本之前很容就能解决这个问题——直接把js代码放到子模板最后就行了,但是2.0版本之后不支持直接使用script标签了!但是要解决这个问题也仍然是很简单的,可以使用组件实现。下面创建一个组件专门用于插入JavaScript代码到模板中。

// app/components/script-tag.js

import Ember from 'ember';

// ember2.0之后不支持在模板中使用script标签,
// 通过组件方式加入
export default Ember.Component.extend({
	tagName: 'script',
    attributeBindings: ['type'],
    type: 'text/javascript'
});

有了组件之后调用就组件插入JavaScript代码就很方便了,并且2.0版本及更高版本也是支持的。下面请看如何调用:

<div class="container">

</div>
{{! 调用组件插入JavaScript代码}}
{{#script-tag}}
$(function() {
    $("#elemId").click(function() {
        // 处理
    });
});
{{/script-tag}}

这样处理之后完美解决了通过link-to进入子模板不触发js事件的问题。 这种方式是可以解决了不加载js代码的问题,但是这种方式显然是不好的,既然官方都不允许开发者在模板中使用script标签了,我们也没必要再这样做了,那么有什么更好的方法呢?请看方法二。

实现方式二

首先谢谢@pynixwang的建议,之前一直没关注到使用组件生命周期方法去实现。这种方式才是官方所推荐的。那么如何实现了,其实很简单,我们只需要把需要在模板上加载的代码放到方法didInsertElement()中即可。详细请看The Component Lifecycle。下面做一个简单的示例。

模板

测试如何在进入本模板的时候加载js代码。

<h1>第一种方式是把JavaScript脚本放到一个组件中加载</h1>
<p>
    参考<a href="http://blog.ddlisting.com/2016/05/16/use-script-tag-in-template/">http://blog.ddlisting.com/2016/05/16/use-script-tag-in-template/</a>
</p>


<h1>第二种方式是把JavaScript脚本放在组件的didInsertElement()方法中加载</h1>
<p>
比如为按钮增加jQuery事件监听。
<button type="button" name="button" id="alterSometing">单击触发</button>    
</p>

把触发事件的代码放在app/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>UeditorTest</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    {{content-for "head"}}

    <link rel="stylesheet" href="assets/vendor.css">
    <link rel="stylesheet" href="assets/ueditor-test.css">

    {{content-for "head-footer"}}
  </head>
  <body>
    {{content-for "body"}}

    <script src="assets/vendor.js"></script>
    <script src="assets/ueditor-test.js"></script>

    {{content-for "body-footer"}}
    <script src="//cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
    <script type="text/javascript">
        $(function() {
            $("#alterSometing").click(function() {
                alert("单击了按钮。");
            });
        });
    </script>
  </body>

</html>

在主模板增加一个进入子模板的链接

{{! app/templates/application.hbs }}
{{#link-to 'script'}}
进入子路由script
{{/link-to}}

等待项目重启完毕,点击首页的链接进入子模板app/templates/script.hbs。然后点击按钮,可以发现并没有触发JavaScript事件。手动刷新页面,再点击按钮,可以看到JavaScript事件被触发了!这是本文一开始就说的问题。现在我们把index.html里的JavaScript代码移动到组件中。但是方法didInsertElement()是在组件类中才有的,所以我们需要创建一个组件。

ember g component script-tag2

组件创建完毕之后我们把原来子模板script.hbs的代码移动到组件模板app/templates/components/script-tag2.hbs中,然后子啊子模板script.hbs中调用组件。

{{! app/templates/script.hbs}}
{{script-tag2}}

关键的部分如何在组件类中触发JavaScript事件呢? 直接把放在index.html中的JavaScript代码移动到方法didInsertElement()中,然后去掉外层的$(function(){})。然后修改成ember的方式调用Ember.$,当然直接使用$("#xxx")的方式也是可以的。

// app/components/script-tag2.js

import Ember from 'ember';

export default Ember.Component.extend({
    didInsertElement() {
        Ember.$("#alterSometing").click(function() {
            alert("单击了按钮。此方法是在组件类的!!");
        });
    }
});

等待项目重启完毕,从新从首页点击链接进入子模板,然后再点击按钮。可以看到JavaScript事件成功触发。截图如下:

JavaScript事件触发

同理,其他的JavaScript事件也是同样的方法。

以上两种方式都可以解决进入子路由不加载JavaScript的问题。方法二是官方建议的,组件在ember中越来越重要的。为了能与新版ember兼容最好还是使用第二种方法。

如果你有更好的方法欢迎给我留言建议!

再次感谢@pynixwang

© 著作权归作者所有

ubuntuvim
粉丝 33
博文 76
码字总数 98477
作品 1
深圳
后端工程师
私信 提问
Ember.js 入门指南——handlebars属性绑定

本文从http://www.ibeginer.sinaapp.com迁移过来,欢迎访问原页面。 简单讲属性绑定其实就是在HTML标签内(是在一个标签的”<”和“>”中使用)直接使用handlebars表达式。可以直接用handleb...

ubuntuvim
2015/09/16
765
0
一个精巧的Javascript Template引擎

基于MVC模式的web框架在渲染页面时,都会提供可以内嵌后端语言的模板引擎,用于使用动态数据生成页面。在某些场景下,无法使用后端的模板引擎,但又需要使用动态数据渲染页面内容,这时便可选...

con
2014/03/29
1K
4
ThinkPHP5.0 视图

新版的控制器可以无需继承任何的基础类,因此在控制器中如何使用视图取决于你怎么定义控制 继承Controller后便可以直接使用 request 和view类的方法$this->request->isPost()$this->fetch() ...

ITCHN
2016/12/17
47
0
angularjs 学习之 angularjs简介

简介 在学习 ionic 的路上遇到 angularjs 的一些指令什么的用法,不熟悉所以还要回来查很麻烦,所以先来系统的学一遍 angularjs 好了。 什么是angularjs AngularJS 是一个 JavaScript 框架。...

邪人君子
2018/01/14
0
0
artTemplate 腾讯的高性能模板引擎

artTemplate-3.0 快速上手 使用一个type="text/html"的script标签存放模板: 渲染模板 演示 模板语法 有两个版本的模板语法可以选择。 简洁语法 推荐使用,语法简单实用,利于读写。 查看语法...

WolfX
2016/02/19
284
0

没有更多内容

加载失败,请刷新页面

加载更多

java通过ServerSocket与Socket实现通信

首先说一下ServerSocket与Socket. 1.ServerSocket ServerSocket是用来监听客户端Socket连接的类,如果没有连接会一直处于等待状态. ServetSocket有三个构造方法: (1) ServerSocket(int port);...

Blueeeeeee
今天
6
0
用 Sphinx 搭建博客时,如何自定义插件?

之前有不少同学看过我的个人博客(http://python-online.cn),也根据我写的教程完成了自己个人站点的搭建。 点此:使用 Python 30分钟 教你快速搭建一个博客 为防有的同学不清楚 Sphinx ,这...

王炳明
昨天
5
0
黑客之道-40本书籍助你快速入门黑客技术免费下载

场景 黑客是一个中文词语,皆源自英文hacker,随着灰鸽子的出现,灰鸽子成为了很多假借黑客名义控制他人电脑的黑客技术,于是出现了“骇客”与"黑客"分家。2012年电影频道节目中心出品的电影...

badaoliumang
昨天
15
0
很遗憾,没有一篇文章能讲清楚线程的生命周期!

(手机横屏看源码更方便) 注:java源码分析部分如无特殊说明均基于 java8 版本。 简介 大家都知道线程是有生命周期,但是彤哥可以认真负责地告诉你网上几乎没有一篇文章讲得是完全正确的。 ...

彤哥读源码
昨天
15
0
jquery--DOM操作基础

本文转载于:专业的前端网站➭jquery--DOM操作基础 元素的访问 元素属性操作 获取:attr(name);$("#my").attr("src"); 设置:attr(name,value);$("#myImg").attr("src","images/1.jpg"); ......

前端老手
昨天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部