Ember 翻译——官网首页

引言

最近博客差点都被荒废了，最近在学习 Ember.js ，官方并没有给出中文文档，而且，这方面的中文文章、博客也不是特别多，加上前两天刚好去参加了 重庆前端交流会 ，受 月影 大大的启发，想要自己尝试一下技术文章的翻译，这里就试着翻译 Ember.js 的官方文档 了。

我可能会根据自己的语言习惯进行修改，但总体尽量保持忠于原文，因为技术、语言功底有限，难免有出错的地方，请大家不吝赐教。

引言

Emberjs 定位

Ember 入门

更多特性
自动更新的 Handlebars 模板

组件

从服务器加载数据

路由

Ember.js 定位

一个为构建重量级 Web 应用而生的框架

Ember 入门

五分钟内构建你的第一个 Ember 应用

$ npm install -g ember-cli

$ ember new ember-quickstart

更多丰富的教程请点击这里

更多特性

Handlebars， 作为 Ember 的集成模板引擎，它能当潜在的数据变化时，允许你用极少量的代码实现（视图的）自动更新。

别再浪费时间为一些细枝末节做出选择。Ember 集成了许多常用的语法，使得你能够把精力集中在那些让你的应用与众不同的点子上，而非重复造轮子。

Ember 为提高生产效率而生。设计之时着重考虑了开发者的工程效率，它友好的 API 能帮助你快捷完成你的工作。

自动更新的 Handlebars 模板

通过在潜在的模型变化时让你的 HTML 仍旧保持在最新状态，Ember 使得 Handlebars 变得更加强大。一开始，你甚至不需要写任何的 JavaScript。

application.hbs

<div>
<label>Name:</label>
{{input type="text" value=name placeholder="Enter your name"}}
</div>
<div class="text">
<h3>My name is {{name}} and I want to learn Ember!</h3>
</div>

组件

Ember 的组件如今将带你体验未来的 web 平台。组件让你能够创建针对你自己的应用的 HTML 标签，它使用 Handlebars 来描述他们的标记，再结合 JavaScript 来实现其自定义的行为。

components/gravatar-image.js

App.GravatarImageComponent = Ember.Component.extend({
size: 200,
email: '',

gravatarUrl: Ember.computed('email', 'size', function() {
var email = this.get('email').toLowerCase(),
size = this.get('size');

return 'http://www.gravatar.com/avatar/' + md5(email) + '?s=' + size;
})
});

application.hbs

<ul class="example-gravatar">
<li>{{gravatar-image email="tomster@emberjs.com" size="200"}}</li>
<li>{{gravatar-image size="200"}}</li>
</ul>

components/gravatar-image.hbs

<img src={{gravatarUrl}}>
<div class="email-input">
{{input type="email" value=email placeholder="Enter your Gravatar e-mail"}}
</div>

从服务器加载数据

Ember 隐藏了你从服务器加载的 JSON 原始数据。如果你会使用 jQuery，那么你就知道如何在 Ember 中获取数据。

app.js

App.ApplicationRoute = Ember.Route.extend({
model: function() {
return Ember.$.getJSON('https://api.github.com/repos/emberjs/ember.js/pulls?page=1&per_page=3');
}
});

application.hbs

<h3>Last 3 Pull Requests to Ember.js</h3>
<ul>
{{#each model as |pr|}}
<li>
<div class="issue-number">#{{pr.number}}</div>
<div class="issue-title">
<a href={{pr.html_url}}>{{pr.title}}</a>
</div>
<div class="author-name">
Opened by <a href={{pr.head.user.html_url}}><strong>@{{pr.head.user.login}}</strong></a>
</div>
</li>
{{/each}}
</ul>

路由

app.js

// Model

App.Mailbox = Em.Object.extend();

App.Mailbox.reopenClass({
find: function(id) {
if (id) {
return App.FIXTURES.findBy('id', id);
} else {
return App.FIXTURES;
}
}
});

// Routes

App.Router.map(function() {
this.route('mailbox', { path: '/:mailbox_id' }, function() {
this.route('mail', { path: '/:message_id', resetNamespace: true });
});
});

App.ApplicationRoute = Em.Route.extend({
model: function() {
return App.Mailbox.find();
}
});

App.MailRoute = Em.Route.extend({
model: function(params) {
return this.modelFor('mailbox').messages.findBy('id', params.message_id);
}
});

// Handlebars helper

App.DateHelper = Ember.Helper.helper(function(date) {
return moment(date[0]).format('MMM Do');
});

application.hbs

<div class="url">URL: {{target.url}}</div>
<aside>
<ul>
<li><h2>Mailboxes</h2></li>
{{#each model as |mailbox|}}
<li>
{{#link-to "mailbox" mailbox current-when="mailbox"}}
<span class="count">
{{mailbox.messages.length}}
</span>
{{mailbox.name}}
{{/link-to}}
</li>
{{/each}}
</ul>
</aside>

<section class="main">
{{outlet}}
</section>

index.hbs

<div class="index">
<h1>TomsterMail</h1>
<span class="tomster"></span>
</div>

mail.hbs

<div class="mail">
<dl>
<dt>From</dt>
<dd>{{model.from}}</dd>
<dt>To</dt>
<dd>{{model.to}}</dd>
<dt>Date</dt>
<dd>{{date model.date}}</dd>
</dl>
<h4>{{model.subject}}</h4>
<p>{{model.body}}</p>
</div>

mailbox.hbs

<table>
<tr>
<th>Date</th>
<th>Subject</th>
<th>From</th>
<th>To</th>
</tr>

{{#each model.messages as |message|}}
{{#link-to "mail" message tagName="tr"}}
<td>{{date message.date}}</td>
<td>{{message.subject}}</td>
<td>{{message.from}}</td>
<td>{{message.to}}</td>
{{/link-to}}
{{/each}}
</table>

{{outlet}}

mailbox/index.hbs

<div class="mailbox-index">
Select an email
</div>

fixtures.js

App.FIXTURES = [
{
name: "Inbox",
id: "inbox",
messages: [
{
id: 1,
subject: "Welcome to Ember",
from: "tomster@emberjs.com",
to: "user@example.com",
date: new Date(),
body: "Welcome to Ember. We hope you enjoy your stay"
}, {
id: 2,
subject: "Great Ember Resources",
from: "tomster@emberjs.com",
to: "user@example.com",
date: new Date(),
body: "Have you seen embercasts.com? How about emberaddons.com?"
}
]
},
{
name: "Spam",
id: "spam",
messages: [
{
id: 3,
subject: "You have one the lottery!!!111ONEONE",
from: "419@thereallotteryhonest.com",
to: "user@example.com",
date: new Date(),
body: "You have ONE the lottery! You only have to send us a small amount of monies to claim your prize"
}
]
},
{
name: "Sent Mail",
id: "sent-mail",
messages: [
{
id: 4,
subject: "Should I use Ember",
from: "user@example.com",
to: "tomster@emberjs.com",
date: new Date(),
body: "Ember looks pretty good, should I use it?"
}
]
}
];

下一篇 Ember.js 指南引导页 >

原文地址

第一篇翻译，问题可能有点多，请见谅~~~