Ember.js--入门
来源:互联网 发布:qq空间pid淘宝客 编辑:程序博客网 时间:2024/05/16 11:33
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/childthis.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
- Ember.js--入门
- Ember.js 入门指南 (一)
- Ember.js 入门指南 (二)
- Ember.js 入门指南——目录
- ember.js
- Ember.js 入门指南——扩展(reopen)
- Ember.js 入门指南——观察者(observer)
- Ember.js 入门指南——绑定(bingding)
- Ember.js 入门指南——枚举(enumerables)
- Ember.js 入门指南——handlebars基础
- Ember.js 入门指南——handlebars条件表达式
- Ember.js 入门指南——handlebars遍历标签
- Ember.js 入门指南——handlebars属性绑定
- Ember.js 入门指南——{{link-to}} 助手
- Ember.js 入门指南——{{action}} 助手
- Ember.js 入门指南——表单元素
- Ember.js 入门指南——调试助手
- Ember.js 入门指南——工具类的助手
- React Native探索(六)不止是UI:React的使用场景探索
- 华为机试——选秀节目打分
- android ListView多线程解决图片错位问题、缩略图问题、实现顺滑滚动
- iOS:json格式字符串转字典,字典转json格式字符串
- 【项目经验】DataTable与JSON之间的转换
- Ember.js--入门
- 字符串匹配算法
- Python的getattr(),setattr(),delattr(),hasattr()
- 在Fragment中如何使用Toolbar
- iOS下微信语音播放之切换听筒和扬声器的方法解决方案
- 对于Button的圆角显示,利用layer实现
- Android app强更解决方案。
- 如何用winscp连接suse
- 什么是扇入和扇出?