| 注册
请输入搜索内容

热门搜索

Java Linux MySQL PHP JavaScript Hibernate jQuery Nginx
8gw234
10年前发布

Ember.js 目前非常流行的H5框架

Ember.js是一个MVC的JavaScript框架,由Apple前雇员创建的SproutCore 2.0改名进化而来,号称「A framework for creating ambitious web applications」。
Ember.js 目前非常流行的H5框架

简介

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 志愿者翻译

原文地址: http://uisource.com/project/ember-js/
 本文由用户 8gw234 自行上传分享,仅供网友学习交流。所有权归原作者,若您的权利被侵害,请联系管理员。
 转载本站原创文章,请注明出处,并保留原始链接、图片水印。
 本站是一个以用户分享为主的开源技术平台,欢迎各类分享!
 本文地址:https://www.open-open.com/lib/view/open1430040788205.html
Ember.js JavaScript开发