Ember 翻译——官网首页

引言

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

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

---

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 指南引导页 >

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