随着Ember JS版本1.0.0的发布,它很难跟上其发展。教程和文档来来往往,导致有关最佳实践和原始开发人员意图的许多混乱。
我的问题正好是:Ember JS的最佳实践是什么?是否有任何更新的教程或工作示例说明如何使用Ember JS?代码示例会很棒!
感谢所有人,尤其是Ember JS开发人员!
随着Ember JS版本1.0.0的发布,它很难跟上其发展。教程和文档来来往往,导致有关最佳实践和原始开发人员意图的许多混乱。
我的问题正好是:Ember JS的最佳实践是什么?是否有任何更新的教程或工作示例说明如何使用Ember JS?代码示例会很棒!
感谢所有人,尤其是Ember JS开发人员!
Answers:
新的和资深的Ember.js开发人员都应该利用一个重要的项目:
尽管确实需要命令行提供一定的舒适度,但是您可以在几秒钟内生成一个现代的Ember项目,其中包含社区推荐的最佳实践。
虽然像Mike Grassotti的回答那样以艰难的方式设置Ember.js项目是有益的,但您不应在生产代码中这样做。特别是当我们有一个如此强大且易于使用的项目Ember-CLI
,向我们展示Yehuda批准的幸福之路时。
此快速入门指南将在几分钟内使您从零变为略大于零。完成后,您应该对ember.js确实有效充满信心,并希望能够对更多知识感兴趣。
警告:不要只是尝试使用本指南,否则会觉得灰烬导致“我可以用jQuery或Fortran更好地编写该快速入门指南”或其他方法。我不是想用灰烬或任何东西卖给您,本指南只不过是一个问候世界。
这个jsFiddle有这个答案的所有代码
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>
默认情况下,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>
只需添加另一个脚本块App = Ember.Application.create({});
即可加载ember.js并初始化您的应用程序。
<script type='text/javascript'>
App = Ember.Application.create({});
</script>
这就是创建基本的余烬应用程序所需要的,但这不是很有趣。
Ember在控制器的上下文中评估每个车把模板。因此application
模板具有匹配项ApplicationController
。如果您未定义Ember,则会自动创建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.js专家,当然还有各个教程的作者:我什么时候应该使用一个教程中的设计模式,何时应该使用另一个教程中的设计模式?
这两个教程代表了编写它们时的最佳实践。可以肯定的是,每个东西都可以学到一些东西,因为ember.js的发展非常迅速,所以两者注定要过时了。在这两者中,Trek的潮流要远得多。
每个选项的哪些组成部分都是个人喜好,随着我的应用程序的成熟,哪些组成部分将变得至关重要?如果您正在开发新的余烬应用程序,我不建议您遵循代码实验室方法。这太过时了,无法使用。
在Code Lab的设计中,Ember似乎更接近应用程序中的现有内容(即使它是其自定义JS的100%),而Trek的应用程序似乎在Ember中的寿命更长。
您的评论很赞。CodeLab正在利用核心余烬组件,并从全局范围访问它们。当它写的时候(9个月前),这很普遍,但是今天编写余烬应用程序的最佳实践已经接近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
@tomdale进行了30分钟的新鲜截屏:https : //www.youtube.com/watch? v = Ga99hMi7wfY
Fire Up Ember-Peepcode截屏值得一看。
我更喜欢木炭约曼法。它为您提供了很多开箱即用的东西,包括:
和更多。
而且其超级易于设置,只需运行yo charcoal
即可创建一个应用,然后yo charcoal:module myModule
添加一个新模块。
更多信息在这里:https : //github.com/thomasboyt/charcoal
如果您想将最新的EmberJS与Ember-Data和Emblem模板引擎一起使用,我已经创建了一个入门工具包。全部包装在Middleman中,因此您可以使用CoffeeScript进行开发。GitHub上的所有内容:http://goo.gl/a7kz6y
尽管Ember.js上的Flame 已过时,但对于那些初次看过余烬的人来说仍然是一个不错的教程。
我已经开始制作一系列视频,这些视频从Ember之前开始,朝着在现实世界中严重的用例中愤怒使用Ember的方向发展。
如果您有兴趣看到这一消息成为现实(如果有兴趣,我很高兴最终将其公开发布),那么您绝对应该转到我发表的帖子并打“赞”(或在此处发表评论,我猜):
我非常热衷于使其能够帮助社区蓬勃发展,同时也帮助人们学习如何以一种简单的方式来构建标准网站。