如何设计一个Ember.js应用程序。

Question

随着Ember JS接近（并达到！）1.0.0版本，跟上它的演变一直是困难的。教程和文档已经来了又去了，导致很多人对最佳实践和原始开发者的意图感到困惑。

我的问题就是：Ember JS的最佳实践是什么？是否有更新的教程或工作示例展示Ember JS的预期使用方式？如果有代码示例会很好！

感谢所有人，特别是Ember JS开发人员！

- Craig Labenz

---

这个问题在谷歌搜索“EmberJS教程”时排名第一，但它并没有真正回答这个问题。实际上，这是一个关于互联网上两个链接的问题。您是否考虑修改此问题以适应标题？我认为最好的答案是实际上带领某人通过使用EmberJS创建一个应用程序的过程。 - George Stocker

Answer 1

Mike Grassotti的最小可行Ember.js快速入门指南

这个快速入门指南可以在几分钟内让你从零到略微超过零。完成后，您应该会对ember.js实际工作感到相当自信，并且希望能够更加深入地了解。

警告：不要仅仅尝试本指南，然后认为ember很糟糕，因为“我可以用jQuery或Fortran编写更好的快速入门指南”或其他任何原因。我并不想让你转向ember或任何其他东西，这个指南只不过是一个hello-world。

Step 0 - 查看jsFiddle

这个jsFiddle包含了本答案中的所有代码。

Step 1 - 包含ember.js和其他必需库

Ember.js需要jQuery和Handlebars两个库。在加载ember.js之前确保这些库已经被加载：

<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
<script type='text/javascript' src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.js"></script>
<script type='text/javascript' src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.1/ember.js"></script>

步骤2 - 使用一个或多个Handlebars模板来描述您的应用程序用户界面

默认情况下，Ember会使用一个或多个Handlebars模板的内容替换您的html页面的body。有一天这些模板将在由Sprockets或maybe grunt.js组装的单独的.hbs文件中。现在，我们将保持所有内容在一个文件中，并使用脚本标签。

首先，让我们添加一个名为application的模板：

<script type="text/x-handlebars" data-template-name="application">
  <div class="container">
    <h1>Ember.js is easy?<small> Minimum Viable Ember.js QuickStart Guide</small></h1>
    <p>{{message}}</p>
  </div>
</script>

第三步 - 初始化您的Ember应用程序

只需添加另一个带有App = Ember.Application.create({});的脚本块，以加载ember.js并初始化您的应用程序。

<script type='text/javascript'>
  App = Ember.Application.create({});
</script>

这就是创建一个基本的Ember应用程序所需的全部，但并不是非常有趣。

步骤 4：添加控制器

Ember 在控制器上下文中评估每个 handlebars 模板。因此，application 模板具有匹配的 ApplicationController。如果您没有定义，则 Ember 会自动创建它，但在这里让我们定制它以添加一个 message 属性。

<script type='text/javascript'>
App.ApplicationController = Ember.Controller.extend({
    message: 'This is the application template' 
});
</script>

步骤五：定义路由+更多的控制器和模板

Ember路由器使得将模板/控制器组合成一个应用程序变得容易。

<script type='text/javascript'>
  App.Router.map(function() {
    this.route("index", { path: "/" });
    this.route("list", { path: "/list" });
  });

  App.IndexController = Ember.Controller.extend({
    message: 'Hello! See how index.hbs is evaluated in the context of IndexController' 
  });

  App.ListRoute = Ember.Route.extend({
    setupController: function(controller) {
      controller.set('content', ['angular.js', 'backbone.js', 'ember.js']);
    }
  });

</script>

为了使其发挥作用，我们修改应用程序模板，添加一个 {{outlet}} 助手。Ember路由器将根据用户的路由将适当的模板呈现到插座中。我们还将使用 {{linkTo}} 助手添加导航链接。

    <script type="text/x-handlebars" data-template-name="application">
      <div class="container">
          <h1>Ember.js is easy?<small> Minimum Viable Ember.js QuickStart Guide</small></h1>
        <p>{{message}}</p>
        <div class="row">
          {{#linkTo index class="span3 btn btn-large btn-block"}}Home{{/linkTo}}
          {{#linkTo list class="span3 btn btn-large btn-block"}}List{{/linkTo}}
        </div>
        {{outlet}}
      </div>
    </script>

    <script type="text/x-handlebars" data-template-name="list">
      <h3 class="demo-panel-title">This is the list template</h3>
      <ul>
      {{#each item in content}}
          <li>{{item}}</li>
      {{/each}}
       </ul>
    </script>

    <script type="text/x-handlebars" data-template-name="index">
      <h3 class="demo-panel-title">This is the index template</h3>
      <p>{{message}}</p>
    </script>

完成！

这个应用的工作示例可以在此处找到。

您可以使用此 jsFiddle作为自己的Ember应用程序的起点

下一步...

• 阅读 Ember 指南
• 也许购买 Peepcode 录屏
• 在 Stack Overflow 或 Ember IRC 上提问

供参考，我的原始回答：

---

我的问题是针对任何Ember.js专家，当然还有相关的教程作者：我应该什么时候使用一个教程的设计模式，什么时候使用另一个教程的设计模式？

这两个教程代表了它们编写时的最佳实践。肯定可以从每个教程中学到东西，但它们都很遗憾地注定会过时，因为Ember.js正在快速发展。其中Trek的教程更加当前。

这两个教程中的哪些组件是个人喜好，哪些组件将在我的应用程序成熟时证明是必不可少的？ 如果您正在开发新的Ember应用程序，我不建议遵循Code Lab的方法。它已经过时，无法使用。

在CodeLab的设计中，Ember似乎更接近于存在于应用程序中（即使它是他的自定义JS的100％），而Trek的应用程序似乎更多地居于Ember内部。

你的评论很正确。CodeLab正在利用核心的Ember组件，并从全局范围访问它们。当它编写时（9个月前），这是相当普遍的，但今天编写Ember应用程序的最佳实践要比Trek所做的更接近。

话虽如此，甚至Trek的教程也变得过时了。现在框架本身生成了需要使用的组件ApplicationView和ApplicationController。

迄今为止最当前的资源是发布在http://emberjs.com/guides/上的指南集合-它们是几周内从头开始编写的，并反映了最新（预发布）版本的Ember。

我还建议查看Trek的WIP项目：https://github.com/trek/ember-todos-with-build-tools-tests-and-other-modern-conveniences

编辑:

@sly7_7 : 我还会给出另一个例子，使用Ember-data https://github.com/dgeb/ember_data_example

- Mike Grassotti

---

我去了http://emberjs.com/guides，虽然解释非常好，但是示例不完整，无法直接运行，并且存在认知前向引用问题，对于完全新手来说很麻烦。它们还在更新中吗？或者有其他补充资源吗？ - Walt Stoneburner

当然它们仍在不断更新。截至今日，快速入门的最佳方式可能是查看 peepcode 的屏幕录像：https://peepcode.com/products/emberjs - Mike Grassotti

@MikeGrassotti 你能否编辑你的答案，展示如何使用EmberJS开始编写源代码？也许提供创建一个“Hello World”应用程序的逐步说明？ - George Stocker

@MikeGrassotti，应该更新[tag:Ember.js]标签的百科知识，以包含这个问题和答案。 - MilkyWayJoe

@MikeGrassotti，你在更新答案方面做得非常好（顺便说一下，它已经很好了）。代码中可能有一些可以更改的细节。请参见http://jsfiddle.net/RTK54/3/和评论。 - sly7_7

Answer 2

有一个重要的项目，新手和老手Ember.js开发人员都应该利用:

Ember-CLI

虽然需要一定的命令行操作经验，但你可以在几秒钟内生成一个现代的Ember项目，并采用社区推荐的最佳实践。

虽然像Mike Grassotti所说的那样艰难地设置Ember.js项目是有益的，但你不应该为生产代码这样做。特别是当我们有如此强大且易于使用的项目Ember-CLI来展示Yehuda批准的happy path时。

- Matt Jensen

---

谢谢Matt！我已将此答案设为接受的答案，以引导流量到Ember-CLI。 - Craig Labenz

刚开始几天前第一次使用Ember，Ember-CLI非常容易上手和使用。唯一的缺点是它会引入很多你可能不想要或不需要的复杂性（尽管如果你是一个信任的个体，这种复杂性可以被忽略）。Bower、JSHint、Ember-CLI、Travis CI、EditorConfig和Git配置文件，以及像Broccoli用于资产和PhantomJS用于测试等其他东西... - JKillian

@JKillian说得有道理。我知道有人担心Ember的学习曲线，出于这些原因。虽然Ember-cli确实引入了一些复杂性（Ember-data和Broccoli），但它消除了关于供应商要求和项目结构的重大困惑。所以这是一个值得考虑的因素。 - Matt Jensen

完全同意Ember CLI的快乐之路！如果Mike Grassotti的快速入门指南不是如此过时，那么它将是“下一步”的完美选择。对于那些想要构建Ember 2.0应用程序的人来说，就最佳实践而言，最重要的是确保您理解核心概念：模型、路由、服务、组件等。Ember文档是一个很好的资源，但由于我没有找到任何一个连接所有概念（更不用说有样本应用程序了）的单个更新指南，因此我决定写下这篇文章：http://emberigniter.com/5-essential-ember-2.0-concepts/ - Frank Treacy

Answer 3

这里有一个由@tomdale制作的30分钟新鲜屏幕录像：https://www.youtube.com/watch?v=Ga99hMi7wfY

- sly7_7

Answer 4

我强烈推荐使用Yeoman及其附带的ember生成器。开箱即用，您将获得开发、测试和准备应用程序生产所需的所有工具。作为额外的奖励，您将能够将视图模板拆分成多个文件，并以智能目录结构开始，这将有助于您创建可维护的代码库。

我编写了一个教程，可以在大约5分钟内让您上手。只需安装node.js并跟随此处。

- Matthew Lehner

Answer 5

Peepcode的《Ember点火》视频值得一看。

- Nath

Answer 6

同时，请参考Tuts+ Premium的免费教程《Let's Learn Ember》。这是他们的免费课程系列，所以是免费的。

正如Tuts团队所称，这门课程分为14个易于跟进的章节。

希望这能帮到您。

祝好！

- Junaid Qadir Shekhanzai

Answer 7

我已经开始制作一系列视频，从Ember之前开始，逐步向使用Ember解决现实世界中的严重问题发展。

如果您有兴趣看到这些视频（如果有兴趣，我很乐意将其公开），您应该转到我发布的帖子并点“赞”（或在此处发表评论）：

http://discuss.emberjs.com/t/making-ember-easier-to-approach-aka-crazy-screencasts-videos-that-will-stick-in-your-mind-for-learning-ember/5284

我非常热衷于帮助社区繁荣发展，同时也希望帮助人们轻松学习如何构建标准的网站。

- Julian Leviston

Answer 8

我刚刚创建了一个入门套件，如果你想使用最新的EmberJS和Ember-Data，以及Emblem模板引擎。所有内容都包含在Middleman中，所以你可以使用CoffeeScript进行开发。所有内容都在我的GitHub上：http://goo.gl/a7kz6y

- Zoltan

Answer 9

尽管已经过时，Ember.js 火焰仍然是一个很好的教程，适合第一次接触 Ember 的人。

- Steve

Answer 10

我更喜欢使用木炭侍从（Charcoal Yeoman）的方法。它可以为你提供很多开箱即用的功能，包括：

• 使用“模块”方法的良好文件夹架构。
• Neuter
• 实时重新加载
• 压缩
• 混淆
• JSHint

还有更多功能。

而且它非常容易设置，只需运行yo charcoal创建一个应用程序，然后运行yo charcoal:module myModule添加新模块。

更多信息请参见：https://github.com/thomasboyt/charcoal

- Ben