如何构建 Ember.js 应用程序
Posted
技术标签:
【中文标题】如何构建 Ember.js 应用程序【英文标题】：How to architect an Ember.js application 【发布时间】：2012-12-21 16:44:05 【问题描述】：随着 Ember JS 接近（并且达到！）版本 1.0.0，很难跟上它的发展。教程和文档来来去去，导致人们对最佳实践和原始开发人员的意图产生了很多困惑。
我的问题正是：Ember JS 的最佳实践是什么？是否有任何更新的教程或工作示例展示了 Ember JS 的使用方式？代码示例会很棒！
感谢大家，尤其是 Ember JS 开发人员！
【问题讨论】：
这个问题在谷歌搜索“EmberJS 教程”中排名靠前，但它并没有真正回答这个问题。这真的是关于互联网上2个链接的问题。你会考虑改变这个问题以适应标题吗？我认为最好的答案是真正让某人完成使用 EmberJS 创建应用程序的过程。 【参考方案1】：Mike Grassotti 的最小可行 Ember.js 快速入门指南
本快速入门指南可让您在几分钟内从零到略大于零。完成后，您应该对 ember.js 确实有效，并希望有足够的兴趣了解更多信息。
警告：不要只是尝试本指南然后认为 ember-sucks 会导致“我可以用 jQuery 或 Fortran 更好地编写快速入门指南”或其他任何东西。我不是想在 ember 或任何东西上向您推销，本指南只不过是一个 hello-world。
第 0 步 - 查看 jsFiddle
this 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>
完成！
here 提供了此应用程序的工作示例。
您可以使用this jsFiddle 作为您自己的 ember 应用程序的起点
接下来的步骤...
阅读Ember Guides 也许可以购买Peepcode 截屏视频 在 Stack Overflow 或 ember IRC 中提问供参考，我原来的回答：
我的问题是针对任何 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
【讨论】：
我最初编写 Code Lab 是为了让人们了解 Ember 和 MVC 框架，但不幸的是，从那以后我没有时间继续写它，而且听起来它已经发生了足够的变化其他人创造了更好的资源。就我个人而言，我已经在我的大部分项目中转而使用 Angular，我发现它需要的 JavaScript 更少，而且更容易理解。你的 MVC 选择完全是个人的，所以不要让我影响你。 转到emberjs.com/guides，虽然解释做得非常好，但示例还不够完整，无法按原样运行，并且受到认知前向引用的影响，这对于进来的人来说很麻烦完全新鲜。它们是否仍在更新，或者是否有免费资源？ 确保它们仍在更新中。截至今天，快速入门的最佳方式可能是查看 peepcode 截屏视频：peepcode.com/products/emberjs @MikeGrassotti 有什么方法可以编辑答案以显示 EmberJS 入门的源代码？也许逐步指导如何使用 EmberJS 创建“Hello World”应用程序？ @MikeGrassotti ember.js 标签 wiki 应更新以包含此问题和答案【参考方案2】：有一个重要的项目，Ember.js 新手和老手都应该利用：
Ember-CLI
虽然它确实需要一定程度的命令行舒适度，但您可以在几秒钟内生成具有社区推荐最佳实践的现代 Ember 项目。
虽然像 Mike Grassotti 的回答那样以艰难的方式设置 Ember.js 项目是有益的，但您不应该为生产代码这样做。尤其是当我们有像Ember-CLI 这样强大且易于使用的项目来向我们展示Yehuda 批准的happy path。
【讨论】：
谢谢马特！我已将此作为将流量引导至 Ember-CLI 的公认答案。 几天前刚开始使用 Ember，Ember-CLI 非常容易上手和使用。唯一的缺点是它确实引入了很多你可能不想要/不需要的复杂性（尽管如果你是一个信任的人，复杂性可以被忽略）。 Bower 和 JSHint 和 Ember-CLI 和 Travis CI 和 EditorConfig 和 Git 配置文件，以及其他东西，比如用于资产的 Broccoli 和用于测试的 PhantomJS... 公平点@JKillian。我知道出于这些原因，人们对 Ember 的学习曲线存在担忧。虽然 Ember-cli 确实引入了一些复杂性（Ember-data 和 Broccoli），但它消除了供应商要求和项目结构方面的重大混淆。所以有一点盐。 完全同意 Ember CLI 的快乐路径！如果不是那么……过时的话，下面的 Mike Grassotti 的快速入门指南将是完美的“下一步”。对于那些希望构建 Ember 2.0 应用程序的人来说，就最佳实践而言，最好的事情是确保您了解核心概念：模型、路由、服务、组件等。Ember 文档是一个很好的资源，但是因为我没有遇到一个连接所有概念的更新指南（更不用说示例应用程序）我决定写这个：emberigniter.com/5-essential-ember-2.0-concepts【参考方案3】：@tomdale 制作了 30 分钟的新鲜截屏视频：https://www.youtube.com/watch?v=Ga99hMi7wfY
【讨论】：
【参考方案4】：我强烈推荐使用Yeoman 及其随附的余烬生成器。开箱即用，您可以获得开发、测试和准备生产应用程序所需的所有工具。作为额外的奖励，您将能够将视图模板拆分为多个文件，并从智能目录结构开始，这将有助于您创建可维护的代码库。
我已经写了一篇关于在大约 5 分钟内启动并运行它的教程。只需安装 node.js 并关注here
【讨论】：
【参考方案5】：The Fire Up Ember - Peepcode 截屏值得一看。
【讨论】：
【参考方案6】：还可以阅读来自 Tuts+ Premium 的名为 Let’s Learn Ember 的免费教程。它是免费的，因为它来自他们的free courses 系列。
这门课程，正如 Tuts 人所说的那样，分为 14 个简单易懂的章节。
我希望这会有所帮助。
问候，
【讨论】：
【参考方案7】：我更喜欢木炭自耕农方法。它为您提供了大量开箱即用的东西，包括：
使用“模块”方法的漂亮文件夹架构。 中性 实时重新加载 缩小 丑化 jshint等等。
而且它的设置超级简单，只需运行yo charcoal 来创建一个应用程序，然后运行yo charcoal:module myModule 来添加一个新模块。
更多信息在这里：https://github.com/thomasboyt/charcoal
【讨论】：
【参考方案8】：我刚刚创建了一个入门工具包，如果您想使用最新的 EmberJS 和 Ember-Data 以及 Emblem 模板引擎。全部包含在 Middleman 中，因此您可以使用 CoffeeScript 进行开发。我的 GitHub 上的所有内容：http://goo.gl/a7kz6y
【讨论】：
【参考方案9】：虽然已经过时了Flame on Ember.js 对于第一次看 ember 的人来说，这仍然是一个很好的教程。
【讨论】：
【参考方案10】：我已经开始制作一系列视频，这些视频从 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
我非常热衷于帮助社区蓬勃发展，同时也帮助人们学习如何以简单的方式构建标准网站。
【讨论】：
以上是关于如何构建 Ember.js 应用程序的主要内容，如果未能解决你的问题，请参考以下文章