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类的实例化对象:

window.App = Ember.Application.create();

里将实例化的对象命名为App,开发者可以根据应用程序的用途,选择意义相符的名字。

创建一个应用程序的实例对象非常重要,原因如下:

定义应用程序的命名空间,所有类都定义成该对象的属性(比如App.PostsView、App.PostsController)。这样做可以避免污染全局作用域。

在document上增加事件监听,并负责将事件发送给视图。

自动渲染模板,包括根模板,以及其他放入根模板的模板,都将被渲染。

基于当前URL创建路由器并开始路由。
应用程序模板
应用程序模板是应用程序启动时被渲染的默认模板,模板内应该包含header、footer以及其他一些修饰内容。另外,还应该包含至少一个{{outlet}}占位符,路由器会根据应用程序的状态,在这里插入相应的模板。

例:

<header>

<h1>Igor‘s Blog</h1>

</header>

<div>

{{outlet}}

</div>

<footer>

&copy;2013 Igor‘s Publishing, Inc.

</footer>

header和footer会保持不动,而div里的内容会被改变,比如用户将URL路径定位到/posts或/posts/15,div里的内容就会做出相应变化。

如果在HTML里保存模板,可以创建一个匿名的script标签,它将会被自动调用到屏幕上。

<script type="text/x-handlebars">

<div>

{{outlet}}

</div>

</script>

如果使用工具加载模板,一定要给模板命名为application。

获取

官网:http://emberjs.com/
中文文档:http://xbingoz.com/emberguides/0.php 志愿者翻译

时间: 2024-10-30 13:20:34

Ember.js 目前非常流行的H5框架的相关文章

ember.js的环境(window)安装及创建应用

现如今.我们经常都可以看到复杂的JavaScript应用程序,由于这些应用程序变得越来越复杂,一长串的jQuery回调语句或者通过应用程序在各个状态执行不同的函数调用,这些做法都会变得无法再让人接受,这导致了JavaScript开发人员开始寻找一种组织和效率更优秀的开发方式.实现组织和效率的其中一个最常用的架构模式,就是我们熟知的Model View Controller (MVC)模式,这种模式鼓励开发人员将其应用程序的不同部分分割为更易于管理的模块,我们不必使用一个函数直接调用数据库,通过创

laravel (5.1) & Ember.js (1.13.0) 的整合

Lavavel 不必过多介绍了, 作为全世界最流行的PHP框架,有着清晰的架构.完善的文档.丰富的工具等等,能够帮助开发者快速构建多页面web应用程序. 然而,随着技术的发展,web程序的另一面--客户端,正在变得越来越多元(PC,手机,平板,其他专用设备等).所以需要一种统一的机制,方便服务器与不同的设备进行通信.Restful API 就是基于这个思想被提出来的. 阮一峰给出了对Restful架构的总结: 每一个URI代表一种资源: 客户端和服务器之间,传递这种资源的某种表现层: 客户端通过

【JavaScript】前端开发框架三剑客—AngularJS VS. Backone.js VS.Ember.js

摘要:透过对Github,StackOverflow,YouTube等社区进行数据收集后可知,AngularJS在各大主流社区中都是最受欢迎的,Backbone.js与Ember.js则不相伯仲.本文将对当前三款流行的Web开发框架作个简单比较. 是否选择了合适的框架进行Web开发对项目是有重大影响的.我们都希望找到一个稳健的易维护的框架结构.接下来,我们一起来对当前三款流行Web开发框架作个简单比较认识. 初步认识 AngularJS诞生于2009年,是商业产品GetAngular的一部分.后

【JavsScript】Ember.js

现在,我们经常都可以看到复杂的JavaScript应用程序,由于这些应用程序变得越来越复杂,一长串的jQuery回调语句或者通过应用程序在各个状态执行不同的函数调用,这些做法都会变得无法再让人接受,这导致了JavaScript开发人员开始寻找一种组织和效率更优秀的开发方式. 实现组织和效率的其中一个最常用的架构模式,就是我们熟知的Model View Controller (MVC)模式,这种模式鼓励开发人员将其应用程序的不同部分分割为更易于管理的模块,我们不必使用一个函数直接调用数据库,通过创

AngularJS, Ember.js, Backbone这类新框架与 jQuery的重要区别在哪里?

jQuery主要是用来操作DOM的,如果单单说jQuery的话就是这样一个功能,它的插件也比较多,大家也都各自专注一个功能,可以说jQuery体系是跟着前端页面从静态到动态崛起的一个产物,他的作用就是消除各浏览器的差异,简化和丰富DOM的API,简单易用. 而AngularJS, Ember.js, Backbone则是比较新的产物,他们的产生不是为了再页面上实现各种特效,而是为了构建更重量级的webapp,这种app通常只有一个页面,通常拥有丰富的数据和交互,业务逻辑耦合深,跟传统的web页面

Ember.js:一个JavaScript框架

Ember.js v2.7.3 发布了. Ember.js是一个JavaScript框架,它极大地减少了构建Web应用程序所需要的时间,精力和资源(腾云科技ty300.com).它的重点是使开发者尽可能高效地处理重复和琐碎的评论,能更好地参与Web项目的开发. Ember.js还为大家提供了Javascript,HTML和浏览器(基础教程qkxue.net),为你创建下一个杀手级的web应用程序提供一切最先进功能的访问. 构建Ember.js 确认Node.js 和 bower 已经安装.运行

Ember.js v2.9.0-beta.2 发布,JavaScript 框架

Ember.js v2.9.0-beta.2 发布了,Ember是一个雄心勃勃的Web应用程序(腾云科技ty300.com),消除了样板,并提供了一个标准的应用程序架构的JavaScript框架(基础教程qkxue.net).本次更新如下: #14237 [BUGFIX] Ensure Engine Routes are deactivated before destruction#14176 [BUGFIX] Ensure Controller#transitionToRoute and Ro

H5框架之Bootstrap(一)

H5框架之Bootstrap(一) 接下来的时间里,我将和大家一起对当前非常流行的前端框架Bootstrap进行速度的学习,以案例的形式.对刚开始想学习Bootstrap的同学而找不着边的就很有帮助了.如果你想详细的学习Bootstrap,建议去http://noob.d8jd.com/noob/5.html这里学习,说多了,开始走两步.... 第一步:下载Bootstrap 看这个大B就知道有多NB了,哈哈~~~~ 英文也说它最流行的HTML,CSS和JS框架,至于它有哪些好处,谁用谁知道.

旺财速啃H5框架之Bootstrap(三)

好多天没有写了,继续走起 在上一篇<<旺财速啃H5框架之Bootstrap(二)>>中已经把CSS引入到页面中,接下来开始写页面. 首先有些问题要先处理了,问什么你要学bootstrap? 流行?写网页快?还是其它什么的?说实话,如果写页面很熟练的人(牛人),根本不会用任何框架写,为什么呢,它们太臃肿了,谁写一个页面能把它所有的CSS都应该用上,所有的类都定义上呢?所以很多代码对于页面来说都是多余的,还好上线后,引入的都是资源库,如果你有代码精简强迫症,那估计你要重写(覆盖)一些东