如何构建Ember.js应用程序


105

随着Ember JS版本1.0.0的发布,它很难跟上其发展。教程和文档来来往往,导致有关最佳实践和原始开发人员意图的许多混乱。

我的问题正好是:Ember JS的最佳实践是什么?是否有任何更新的教程或工作示例说明如何使用Ember JS?代码示例会很棒!

感谢所有人,尤其是Ember JS开发人员!


7
对于Google搜索“ EmberJS教程”,此问题排在首位,但并不能真正回答该问题。这实际上是关于Internet上2个链接的问题。您是否考虑更改此问题以适合标题?我认为最好的答案将是实际上使某人完成了使用EmberJS创建应用程序的过程。
乔治·斯托克

Answers:


17

新的和资深的Ember.js开发人员都应该利用一个重要的项目:

灰烬CLI

尽管确实需要命令行提供一定的舒适度,但是您可以在几秒钟内生成一个现代的Ember项目,其中包含社区推荐的最佳实践。

虽然像Mike Grassotti的回答那样以艰难的方式设置Ember.js项目是有益的,但您不应在生产代码中这样做。特别是当我们有一个如此强大且易于使用的项目Ember-CLI,向我们展示Yehuda批准的幸福之路时


1
谢谢马特!我已经将此作为直接将流量引向Ember-CLI的公认答案。
Craig Labenz 2015年

几天前才刚开始使用Ember,并且Ember-CLI相当容易上手和使用。唯一的缺点是,它确实引入了许多您可能不需要/不需要的复杂性(尽管复杂性可以被忽略,如果您是一个值得信任的人)。Bower和JSHint和Ember-CLI和Travis CI和EditorConfig和Git配置文件,以及诸如Broccoli用于资产和PhantomJS用于测试...
JKillian 2015年

公平点@JKillian。出于这些原因,我知道有人担心Ember的学习曲线。尽管Ember-cli确实引入了一些复杂性(Ember-data和Broccoli),但它消除了围绕供应商需求和项目结构的重大困惑。所以有一粒盐。
马特·詹森

1
完全同意Ember CLI的快乐之路!迈克·格拉索蒂(Mike Grassotti)的以下快速入门指南,如果不是那么过时的话,将是完美的“下一步”。对于那些希望构建Ember 2.0应用程序的人来说,就最佳实践而言,最好的办法是确保您了解核心概念:模型,路线,服务,组件等。Ember文档是一个很好的资源,但是自从我我还没有遇到一个将所有概念联系在一起的更新指南(更不用说一个示例应用程序了),我决定将其编写起来:emberigniter.com/5-essential-ember-2.0-concepts
Frank Treacy,

110

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

此快速入门指南将在几分钟内使您从零变为略大于零。完成后,您应该对ember.js确实有效充满信心,并希望能够对更多知识感兴趣。

警告:不要只是尝试使用本指南,否则会觉得灰烬导致“我可以用jQuery或Fortran更好地编写该快速入门指南”或其他方法。我不是想用灰烬或任何东西卖给您,本指南只不过是一个问候世界。

第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将使用一个或多个handlbars模板的内容替换html页面的主体。有一天,这些模板将放在链轮或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-初始化您的余烬应用程序

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

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

这就是创建基本的余烬应用程序所需要的,但这不是很有趣。

步骤4:添加控制器

Ember在控制器的上下文中评估每个车把模板。因此application模板具有匹配项ApplicationController。如果您未定义Ember,则会自动创建Ember,但是在这里让我们对其进行自定义以添加message属性。

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

这两个教程代表了编写它们时的最佳实践。可以肯定的是,每个东西都可以学到一些东西,因为ember.js的发展非常迅速,所以两者注定要过时了。在这两者中,Trek的潮流要远得多。

每个选项的哪些组成部分都是个人喜好,随着我的应用程序的成熟,哪些组成部分将变得至关重要?如果您正在开发新的余烬应用程序,我不建议您遵循代码实验室方法。这太过时了,无法使用。

在Code Lab的设计中,Ember似乎更接近应用程序中的现有内容(即使它是其自定义JS的100%),而Trek的应用程序似乎在Ember中的寿命更长。

您的评论很赞。CodeLab正在利用核心余烬组件,并从全局范围访问它们。当它写的时候(9个月前),这很普遍,但是今天编写余烬应用程序的最佳实践已经接近Trek所做的事情。

也就是说,即使Trek的教程也已经过时了。被要求的组件ApplicationViewApplicationController现在由框架本身产生的。

到目前为止,最新资源是在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


1
我最初编写代码实验室的目的是使人们在Ember和MVC框架上获得成功,但是不幸的是,此后我没有时间继续这样做,而且听起来好像已经发生了很大变化,以至于其他人创造了更好的资源。就我个人而言,此后我已将大多数项目切换为使用Angular,我发现它所需的JavaScript更少,并且使我的头脑变得容易一些。您对MVC的选择完全是个人的,所以不要让我影响您。
PeteLe 2013年

1
转至emberjs.com/guides,尽管说明做得非常好,但示例不够完整,无法按原样运行,并且存在认知前瞻性参考,这对于刚接触新鲜事物的人来说是麻烦的。它们仍在更新中,还是有免费的资源?
Walt Stoneburner

1
当然,它们仍在更新中。从今天起,最好的快速入门方法是查看peepcode截屏视频,
网址

2
@MikeGrassotti有什么方法可以编辑答案以显示EmberJS入门的源代码?也许逐步说明如何使用EmberJS创建“ Hello World”应用程序?
乔治·斯托克

2
@MikeGrassotti ember.js标签Wiki应该更新为包含此问题和答案
MilkyWayJoe


4

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

我写了一个教程,介绍如何在大约5分钟内启动并运行它。只需安装node.js并按照此处进行操作




0

我更喜欢木炭约曼法。它为您提供了很多开箱即用的东西,包括:

  • 一个使用“模块”方法的不错的文件夹体系结构。
  • 中性
  • 实时重载
  • 缩小
  • 丑化
  • sh

和更多。

而且其超级易于设置,只需运行yo charcoal即可创建一个应用,然后yo charcoal:module myModule添加一个新模块。

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


0

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



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

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

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.