很难跟上Ember JS的演变,因为它接近(并达到!)版本1.0.0.教程和文档已经过去,导致很多关于最佳实践和原始开发人员意图的混淆.
我的问题是:Ember JS的最佳实践是什么？是否有任何更新的教程或工作样本显示如何使用Ember JS？代码示例会很棒!
感谢大家,尤其是Ember JS开发者!
Mik*_*tti 110
本快速入门指南应该会在几分钟内从零到略高于零.完成后,您应该对ember.js确实有效并且希望有足够的兴趣了解更多信心.
警告:不要只是尝试本指南,然后认为ember-sucks导致"我可以在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页面的主体.有一天,这些模板将在由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>
只需添加另一个脚本块App = Ember.Application.create({});即可加载ember.js并初始化您的应用程序.
<script type='text/javascript'>
App = Ember.Application.create({});
</script>
这就是创建基本ember应用程序所需的全部内容,但它并不是很有趣.
Ember在控制器的上下文中评估每个把手模板.所以application模板有匹配ApplicationController.如果您没有定义Ember,则会自动创建Ember,但是在这里我们自定义它以添加消息属性.
<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.js专家,当然还有各自的教程作者:我应该何时使用一个教程中的设计模式,何时使用另一个教程？
这两个教程代表了编写时的最佳实践.可以肯定的是,每个人都可以学到一些东西,因为ember.js的移动非常快,所以两者都注定要过时.在这两者中,Trek's更为现实.
每个组件的哪些组成部分是个人偏好,哪些组件在我的应用程序成熟时必不可少？如果您正在开发新的ember应用程序,我不建议您遵循Code Lab方法.它太过于有用了.
在Code Lab的设计中,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
