105

随着 Ember JS 接近（并且达到！）版本 1.0.0，很难跟上它的发展。教程和文档来来去去，导致人们对最佳实践和原始开发人员的意图产生了很多困惑。

我的问题正是：Ember JS 的最佳实践是什么？是否有任何更新的教程或工作示例展示了 Ember JS 的使用方式？代码示例会很棒！

感谢所有人，尤其是 Ember JS 开发人员！

4

10 回答 10

110

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

本快速入门指南应能在几分钟内让您从零到略大于零。完成后，您应该对 ember.js 确实有效，并希望有足够的兴趣了解更多信息。

警告：不要只是尝试本指南，然后认为 ember-sucks 会导致“我可以用 jQuery 或 Fortran 更好地编写该快速入门指南”或其他任何内容。我不是想在 ember 或任何东西上卖给你，本指南只不过是一个你好世界。

第 0 步 - 查看 jsFiddle

这个 jsFiddle有这个答案的所有代码

第 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 步 - 使用一个或多个把手模板描述您的应用程序的用户界面

默认情况下，ember 将使用一个或多个把手模板的内容替换您的 html 页面的正文。有一天，这些模板将位于由 sprockets 或 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>

第 3 步 - 初始化您的 ember 应用程序

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

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

这就是创建基本 ember 应用程序所需的全部内容，但这并不是很有趣。

第 4 步：添加控制器

Ember 在控制器的上下文中评估每个车把模板。所以application模板有一个匹配的ApplicationController. 如果您没有定义 Ember 会自动创建，但这里让我们自定义它以添加消息属性。

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

第 5 步：定义路由 + 更多控制器和模板

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.js 专家，当然还有各自的教程作者：我应该什么时候使用一个教程中的设计模式，什么时候使用另一个教程？

这两个教程代表了编写它们时的最佳实践。当然，每个人都可以从中学到一些东西，但遗憾的是，两者都注定会过时，因为 ember.js 的发展非常迅速。在这两者中，Trek 的要流行得多。

每个组件的哪些组件是个人喜好，随着我的应用程序成熟，哪些组件将被证明是必不可少的？如果您正在开发新的 ember 应用程序，我不建议您遵循 Code Lab 方法。它太过时了，没有用。

在 Code Lab 的设计中，Ember 似乎更接近于存在于应用程序中（尽管它是 100% 的他的自定义 JS），而 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

于 2013-01-07T23:10:58.583 回答
17

Ember.js 新手和老手都应该利用一个重要的项目：

Ember-CLI

虽然它确实需要一定程度的命令行舒适度，但您可以在几秒钟内生成具有社区推荐的最佳实践的现代 Ember 项目。

虽然像 Mike Grassotti 的回答那样以艰难的方式设置 Ember.js 项目是有益的，但您不应该为生产代码这样做。尤其是当我们有这样一个功能强大且易于使用的项目时，就像Ember-CLI向我们展示了 Yehuda 认可的幸福之路。

于 2015-04-18T18:56:12.877 回答
10

@tomdale 制作了 30 分钟的新鲜截屏视频：https: //www.youtube.com/watch? v=Ga99hMi7wfY

于 2013-03-28T07:37:34.810 回答
4

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

我已经写了一篇关于在大约 5 分钟内启动并运行它的教程。只需安装 node.js 并在此处进行操作

于 2013-07-28T01:17:50.680 回答
2

Fire Up Ember - Peepcode截屏视频值得一看。

于 2013-07-22T19:12:07.263 回答
1

还可以阅读这个名为Let's Learn Ember from Tuts+ Premium的免费教程。它是免费的，因为它来自他们的free courses系列。这门课程，正如 Tuts 人所说的那样，分为 14 个易于理解的章节。

我希望这有帮助。

问候，

于 2013-07-20T21:23:12.870 回答
0

我更喜欢木炭自耕农方法。它为您提供了大量开箱即用的东西，包括：

  • 使用“模块”方法的漂亮文件夹架构。
  • 中性
  • 实时重新加载
  • 缩小
  • 丑化
  • jshint

和更多。

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

更多信息在这里：https ://github.com/thomasboyt/charcoal

于 2013-06-11T17:56:07.003 回答
0

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

于 2013-10-21T00:35:52.887 回答
0

尽管Ember.js 上过时的 Flame 对于第一次看 ember 的人来说仍然是一个很好的教程。

于 2014-01-08T18:21:52.027 回答
0

我已经开始制作一系列视频，这些视频从 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

我非常热衷于帮助社区蓬勃发展，同时也帮助人们学习如何以简单的方式构建标准网站。

于 2014-05-16T06:20:05.783 回答