Ember.js 目前非常流行的H5框架
Ember.js是一个MVC的JavaScript框架,由Apple前雇员创建的SproutCore 2.0改名进化而来,号称「A framework for creating ambitious web applications」。
简介
Emberjs——一个用于创建 web 应用的 JavaScript MVC 框架,采用基于字符串的Handlebars模板,支持双向绑定、观察者模式、计算属性(依赖其他属性动态变化)、自动更新模板、路由控制、状态机等。
Ember使用自身扩展的类来创建Ember对象、数组、字符串、函数,提供大量方法与属性用于操作。
每一个Ember应用都使用各自的命名空间,避免冲突。
Ember采用可嵌套的视图层,使视图变得有层次。
核心概念
上手Ember.js,必须先理解几个核心概念。
我们希望开发者能够建立雄心勃勃的、与原生应用抗衡的大型web应用,要做到这一点,必须拥有先进的工具和正确的概念,以帮助开发者进行沟通协作。
我们耗费了大量时间去参考原生应用框架的思想,比如Cocoa,但是那些概念不仅没能形成帮助,反而还成为了一种障碍,而且,有些概念确实也并不适合web开发的特征。于是我们转去向其他一些流行的开源项目寻找灵感,比如Ruby on Rails以及Backbone.js。
因此,Ember.js是一个综合体,它结合了原生应用的强大,且兼具现代网络的轻量与敏捷。
概念
模板 TEMPLATES
Ember.js使用Handlebars模板引擎定义应用程序的用户界面,模板里可以包含HTML以及以下内容:
表达式(Expressions):比如{{firstname}},用来提取控制器或者模型中的信息,将之转换成HTML,并且保持自动更新。
插口(Outlets):给其他模板预留的占位符,当用户操作应用程序的时候,路由器可以控制不同的模板接入到插口的位置。通过{{outlet}}标记可以在模板里创建插口。
视图(Views):负责处理用户事件,通过{{view}}标记在模板里创建。
视图 VIEWS
嵌入在模板里的视图负责将原始事件(比如点击、手势、滑动)转换成应用里定义的事件,并将事件发送给控制器。
比如,视图可以将click事件转换成更有意义的deleteItem事件,并发送给控制器。如果控制器没有实现deleteItem事件,则事件会发送给当前的路由器。
控制器 CONTROLLERS
控制器储存应用程序状态,模板用来连接控制器,并将控制器的当前状态转换成HTML。
控制器通常用来为模板描述模型,在这种情况下,控制器将模型的属性传给模板,并以模板期望的方式修改或增加模型。
模型 MODELS
模型用来处理持久化的数据,比如在应用程序中由用户赋值的数据。模型对象一般由服务器加载,当客户端做出修改的时候,再存回服务器。
通常来说,数据可以转换为JSON格式由服务器传递给Ember.js的模型,实现关联、属性计算,以及其他一些功能。
路由器 ROUTER
路由器负责管理应用程序的状态。
当用户启动应用程序,它会检查URL,确保载入正确的模板进行展示,并为模板解析相应的模型对象。
当应用程序在运行到不同状态时,路由器会自动更新URL,用户可以保存URL,以便返回之前的一些状态,或者通过URL与其他用户分享当前页面。
上面这些就是开发Ember.js应用程序需要了解的核心概念。我们设计的系统支持复杂的扩展,如果你能遵循这些基本内容,在增加新功能的时候就不必回溯整个系统。
我们认为,让多个开发者通过框架的模式,对一个问题在解决方式上达成一致是很重要的。现在已经解释了一些基本对象所扮演的角色,接下来就要深入Ember.js,了解各个部分的细节和工作方式。
使用
创建一个应用程序
创建Ember.js应用程序的第一步是创建一个Ember.Application类的实例化对象:
里将实例化的对象命名为App,开发者可以根据应用程序的用途,选择意义相符的名字。
创建一个应用程序的实例对象非常重要,原因如下:
定义应用程序的命名空间,所有类都定义成该对象的属性(比如App.PostsView、App.PostsController)。这样做可以避免污染全局作用域。
在document上增加事件监听,并负责将事件发送给视图。
自动渲染模板,包括根模板,以及其他放入根模板的模板,都将被渲染。
基于当前URL创建路由器并开始路由。
应用程序模板
应用程序模板是应用程序启动时被渲染的默认模板,模板内应该包含header、footer以及其他一些修饰内容。另外,还应该包含至少一个{{outlet}}占位符,路由器会根据应用程序的状态,在这里插入相应的模板。
例:
<h1>Igor‘s Blog</h1>
</header>
<div>
{{outlet}}
</div>
<footer>
©2013 Igor‘s Publishing, Inc.
</footer>
header和footer会保持不动,而div里的内容会被改变,比如用户将URL路径定位到/posts或/posts/15,div里的内容就会做出相应变化。
如果在HTML里保存模板,可以创建一个匿名的script标签,它将会被自动调用到屏幕上。
<div>
{{outlet}}
</div>
</script>
如果使用工具加载模板,一定要给模板命名为application。
获取
官网:http://emberjs.com/
中文文档:http://xbingoz.com/emberguides/0.php 志愿者翻译
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。