Ember
资源
推荐一个好用Chrome插件Ember Inspector,通过它我们可以更加容易理解Ember的模板,路由和控制之间的关系,从而提高我们的开发效率。
http://images.cnitblog.com/blog/183411/201304/29212211-08f4843c0b6448b6ba7f7f5088779215.png
Ember介绍
Ember 被形容为 "一个 JavaScript 框架,用于创建可以消除样板并提供标准应用程序架构的大型 web 应用程序。"
它本身紧密集成了名为 Handlebars 的模板引擎,该引擎为 Ember 提供了其中一个最强大的功能: 双向数据绑定。
Ember 还提供了其他功能,比如状态管理(某个用户状态是已注销还是已登录)、自动更新模板(当底层数据发生变化时,您的 UI 也同样发生变化)以及计算属性 (firstName + lastName = fullName)。
配置Ember
Eember.js 依赖传统的类库例如 JQuery 和 Handlerbars 。
但是稍等一下,难道我不是说过JQuery和Ember运用在不同的地方吗?是的,我说过。但是这里有一些情况,Ember团队不想再去重复创建轮子了.他们选择JQuery,因为JQuery是最好的方式去操作DOM,这是一件相当完美的事情.同样的道理,他们为什么去选择Handlerbars,因为它是一个相当不错的模版,有Yehuda Katz来是实现,他是Ember的核心开发人员之一。
通过Github依赖库这个工具,我们可以通过非常简单的方式去抓取到我们需要的Ember.js。这是一个简单开始的例子。到目前位置,它包含
- Ember 1.0 RC1
- Handlerbars 1.0 RC3
- jQuery 1.9.1
现在有一个基本的html页面模版,它包含所有相关的框架(JQuery,Ember等)。并且包括一个Handlebars例子和一个基本的Ember的应用,这个应用叫"app.js"。
<script src="js/libs/jquery-1.9.1.js"></script> <script src="js/libs/handlebars-1.0.0-rc.3.js"></script> <script src="js/libs/ember-1.0.0-rc.1.js"></script> <script src="js/app.js"></script>
程序结构
//Ember 要求变量的名称以一个大写字母开始,以便绑定的系统可以找到它。 var Songs = Ember.Application.create({ //属性设置 mixmaster: 'Andy', totalReviews: 0, //该方法的工作方式与 jQuery 的 document.ready() 块完全一样 ready: function () { alert('Ember sings helloooooooooo!'); } });
router
//CI访问路径 http://todo.zenho.com/ember#/list //文件访问路径 http://todo.zenho.com/js/ember.html#/list
笔记
The Store can be configured with various adapters (for example, the RESTAdapter interacts with a JSON API, and the LSAdapter persists your data in the browser’s local storage).
The FixtureAdapter is a great way to start with Ember.js and Ember-Data. It lets you work with sample data in the development stage. At the end, we will switch to the LocalStorage adapter (or LSAdapter).
You can define either a route or a resource. Keep in mind that a resource is a group of routes and that it allows routes to be nested.