初探Ember.js
by
at 2012-08-18 14:29:48
original http://feedproxy.google.com/~r/tualatrix/~3/YQJnP-eyoD8/1753.html
Ember.js是一个MVC的JavaScript框架，由Apple前雇员创建的SproutCore 2.0改名进化而来，号称「A framework for creating ambitious web applications」，现在是1.0 preview版。
我也不知道从哪里开始看到它的，总之最近想用新技术去填一个老坑，于是在技术选型时，就开始找一些比较前瞻的Web技术。因为是个人项目，我不在乎这技术是否成熟或者有多少最佳实践，于是就选择了这个「full-featured」并且「Bleeding edge」的框架。
如果你还不了解什么是Ember.js，可以参考这些文章：
如果你对图形编程有经验，对MVC设计模式有研究，特别是有Cocoa经验，那么翻完Ember.js的那几篇Guides以后，你就会有觉得「这东西太像Cocoa了」之类的感叹。也难怪，在它还叫SproutCore的时候，它就有「Cocoa for Web」的称号。如果你的Web Apps将有大量的数据及交互，那么可以考虑试试Ember.js。
因为我刚刚接触Ember.js，本篇并不是总结，而是个人学习的一点认知和收获。
学习Ember.js我通过Adobe官方的一个初学者指南进行《点燃圣火！ Ember.js 的初学者指南》，然后在看完这篇Guider的demo的例子：ember-tweets，是用的0.9.6版本，而现在Ember.js已经是1.0 Pre了。我把它更新到最新版本后，就跑不起来了。
于是我花了一些时间重新改这个demo，在hack的过程中，对Ember.js有了些认识。这个demo的主要功能是：
- 输入Twitter的用户名，则会在左侧显示「Recent Users」，并把Tweets载入在右侧。
- 点击用户名并有一个重新排序和重新显示的过程，点击X就会删除当前用户。
注：在看我下文时，建议根据教程自己过一遍Ember.js，不然可能会有点跳跃。
Ember.js的Action和数据传递
在我改用了Ember.js 1.0 pre后，点击用户名并重新载入Tweets的方法就无效了，于是我研究了一下源代码：
index.html
<a href="#" title="view again" ></a>
app.js
searchAgain: function(view){ App.tweetsController.set('username', view.context); App.tweetsController.loadTweets(); },
这句代码主要是，在点击那个link之后，触发searchAgain的方法，然后更新App.tweetsController的username值，并重新载入Tweets。
在这里，但是在searchAgain: function(view) 这里，view的这个参数实际上是有问题的。根据Handlebars.helpers文档的说明，该处的参数值实际对象是jQuery.Event，view包含在这里面。但我尝试改成event.view.context时，还是无法取得我所需要的用户名。
改成：
<a href="#" title="view again" ></a>
之后，才真正的将我要的用户名通过中间那个this传递给了event.context这个值。
Ember的字符串格式化
默认情况下，所以在Ember内部的字符串，都是String类型的，如果你想转换成普通字符串，则需要用"%@".fmt(context)才行，所以在app.js里面要改成：
App.tweetsController.set('username', "%@".fmt(event.context));
基本上做完这两点后，这个ember-tweets就能又工作了~我将这个新的ember-tweets的代码放在了Github上，你若有兴趣可以clone下来看看到底是怎么样一个App：
https://github.com/tualatrix/ember-tweets
Ember.js的一点小结
Ember.js的MVC模式很像Cocoa，而不是Rails，这是我的第一感觉。由于Ember.js是我接触的第一个JavaScript MVC框架，下面的小结可能没啥对比意义：
- 命名空间很不错，这样多个App可以交织运行在一个WebApp下，感觉会有利于维护和复用；
- Model、View和Controller的结构还挺清晰，改变了我之前觉得JavaScript代码难以阅读的印象；
- Handlebars模板机制对于有任何其他模板经验的人来说比较容易上手；
更多的仍在探索中，希望到时能用Ember.js顺利实现出我想要实现的Idea。