Ember.js--入门

最新推荐文章于 2024-05-26 09:32:19 发布

风火一回

最新推荐文章于 2024-05-26 09:32:19 发布

阅读量3.4k

点赞数

分类专栏： Ember 文章标签： Ember 认识静态页面 demo

本文链接：https://blog.csdn.net/mafan121/article/details/50483080

版权

Ember 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Ember.js是构建“雄心勃勃”的应用程序的MVC模式javascript框架。它是一个基于模版(handlebars)开发的javascript框架。Ember.js唯一依赖于Jquery，故而开发的时候至少应包含如下js：

<script src="../../../jquery/jquery-1.8.3.min.js"></script>
<script src="../handlebars-1.0.0-rc.3.js"></script>
<script src="../ember-1.0.0-rc.1.js"></script>
<script src="js/app.js"></script>

构建Ember.js应用主要使用它的6个组件：应用程序（Application）、模型（Model）、视图（View）、模板（Template）、路由（Routing）和控制器（Controller）。

Application：一个全局的命名空间对象，其他所有组件都属于应用，创建应用即是创建程序入口。

Model：一个存储持久化数据的对象。一般数据从服务端获取，由应用操作，展示给用户。

View:负责将原生事件转换为应用中的语义事件，并将时间发送到控制器。视图必须包含一个模版。

Tempalte：用来描述你的应用的用户界面的，它是用Handlebars 模版语言来写的。

除了普通的HTML，模版还包含以下内容：

1.表达式，从控制器和模型中获取数据，并将数据替换成html内容。当数据改变时，会自动更新html内容。例如：{{firstName}}。

2.插座（Outlet），模版的占位符。当用户访问你的应用的时候，路由器会根据url将不同的模版插入到插座（outlet）中展示出来。在模版中使用{{outlet}}标签来添加一个插座（outlet）。

3.视图（View），负责处理用户事件。在模版中使用{{view}}标签来添加一个视图。

Routing：负责将URL与模版、模型、控制器关联起来，是一个管理应用状态的对象。

Controller：一个存储应用临时数据的对象，模版会连接控制器将当前存储的数据转换为HTML。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ember Demo</title>
<script src="../../jquery/jquery-1.8.3.min.js"></script>
<script src="../handlebars-1.0.0-rc.3.js"></script>
<script src="../ember-1.0.0-rc.1.js"></script>
<script type="text/javascript">
	//创建应用,Ember中变量命名应首字母大写
	App = Ember.Application.create();
	//创建路由
	App.Router.map(function() {
		//resoure是一个路由组，path表示路由路径,注意路由名必须与模版名对应
		//访问时，在当前路径后添加#路由路径即可
		this.resource('main', { path: '/' }, function() {
			//定义一个子路由，main.child对应模版名main/child
			this.route('child');
		});
	});
</script>
</head>
<body>
<!-- 定义一个应用模版，应用可以省略模版名，默认为：application -->
<script type="text/x-handlebars">
	<h2>This is my first demo</h2>
	{{outlet}}
</script>
<!-- 定义一个父模版 -->
<script type="text/x-handlebars" data-template-name="main">
	<h3>这是一个主模版</h3>
	{{outlet}}
</script>
<!-- 定义一个自模版 -->
<script type="text/x-handlebars" data-template-name="main/child">
	<h3>这是一个子模版</h3>
</script>
</body>
</html>

页面效果：

访问子路由：

风火一回

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ember.js--入门

Ember.js是构建“雄心勃勃”的应用程序的MVC模式javascript框架。它是一个基于模版(handlebars)开发的javascript框架。Ember.js唯一依赖于Jquery，故而开发的时候至少应包含如下js：构建Ember.js应用主要使用它的6个组件：应用程序（Application）、模型（Model）、视图（View）、模板（Template）、路由（Rou
复制链接

扫一扫

专栏目录