Ember

来自tomtalk
跳转至: 导航搜索

资源

http://emberjs.com/

http://handlebarsjs.com/

Ember.js的一些学习总结

推荐一个好用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.