以上就是给各位分享Ember.js入门指南——handlebars基础，其中也会对emberjs教程进行解释，同时本文还将给你拓展ember.js–Handlebars助手和EmberHandleba
以上就是给各位分享Ember.js 入门指南——handlebars基础，其中也会对emberjs教程进行解释，同时本文还将给你拓展ember.js – Handlebars助手和Ember Handlebars助手有什么区别？、ember.js – Handlebars帮助器返回标记、ember.js – Handlebars条件类属性、ember.js – 使用Handlebars Runtime进行预编译的ember-i18n等相关知识，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！
本文目录一览：- Ember.js 入门指南——handlebars基础（emberjs教程）
- ember.js – Handlebars助手和Ember Handlebars助手有什么区别？
- ember.js – Handlebars帮助器返回标记
- ember.js – Handlebars条件类属性
- ember.js – 使用Handlebars Runtime进行预编译的ember-i18n
Ember.js 入门指南——handlebars基础（emberjs教程）
Ember采用handlebars模板库作为应用程序的view层。Handlebars模板与普通的HTML非常相似。但是相比普通的HTML而言handlebars提供了非常丰富的Ember表达式。
Ember采用handlebars模板并且扩展了很多功能，让你使用handlebars就像使用HTML一样简单。你设置可以指定某个模板显示你的应用程序界面，并且还不需要编写更新界面显示值的代码，Ember会自动为你更新。
在介绍模板之前先介绍一个非常有用、强大的工具 Ember CLI，使用这个工具可以自动生成Ember的代码，甚至可以帮你构建一个新的Ember项目，为你省去很多重复的劳动。有关它的详细介绍请看官网，上面有非常详细的教程，或者你可以使用命令：ember –help 查看它的帮助文档，所涉及的插件请自行安装，如有不明白的可以联系我。下面我将使用这个工具新建一个Ember项目，并运行它。
1，Ember CLI 工具
新建项目命令:
ember new chapter2_tempalte
进入项目目录并启动服务器：
cd chapter2_template
ember server
运行项目，浏览器打开这个链接：http://localhost:4200/
如果你能看到如下信息说明安装成功了。
如果项目创建成功你可以继续往下看，如果创建不成功请重试，因为后面的代码都基于这个项目来演示的！！！对于生成的每个文件和目录请你看官网文档，上面会有非常详细的说明。为了方便懒人在此就简单介绍其中几个很重要的目录：
目录 |
说明 |
app |
项目的主要代码都是放在这个目录下 |
app/controllers |
存放C（MVC）层（controller）的代码文件 |
app/helpers |
存放自定义的helper代码文件 |
app/models |
存放M（MVC）层（model）代码文件 |
app/routes |
存放项目路由设置代码文件 |
app/templates |
存放项目模板代码文件 |
bower_components |
第三方插件库 |
tests |
单元测试文件 |
vendor |
不是使用npm和bower安装的第三方插件库 |
ember-cli-build.js |
设置构建规范 |
dist |
存放项目静态资源 |
上述这些文件或者目录是后面开发过程经常会用到，只要你是使用ember new appName命令生成的项目都会包括上述这些目录或者文件。其中最重要的就是app目录下的文件、目录了，从app里面的目录结果你就可以很清楚的看到这是个MVC框架的项目。Ember之所以能找到controller对应的template也是根据目录和文件的名称找到的，Ember是有自己的一套命名规则的，详情请看官方文档。
2，模板定义
<!-- app/templates/application.hbs -->
<h1>Kittens</h1>
<p>
Kittens are the cutest!!
</p>注意：代码中的第一句注释的内容表明了这个文件的位置已经文件名称，后面的代码片段也会采用这种方式标注。如果没有特别的说明第一句代码都是注释文件的路径及其名称。
上述就是一个模板，非常简单的模板，只有一个h1和p标签，当你保存这个文件的时候Ember CLI会自动帮你刷新页面，不需要你手动去刷新！此时你的浏览器页面应该会看到如下信息：
那么恭喜你，模板定义成功了，至于为什么执行localhost:4200就直接显示到这里等你慢慢学到controller和route的时候自然会明白，你就当application.hbs是一个默认的首页，这样你应该明白了吧！
3，handlbars表达式
每一个模板都会有一个与之关联的controller类。这就是模板能显示表达式的值的原因，你可以在controller类中设置模板中表达式显示的值，就像java web开发中在servlet或者Action调用request.setAttribute()方法设置某个属性一样。比如下面的模板代码：
<!-- app/templates/application.hbs -->
<!-- 这个是默认的模板，Ember会根据命名的规则自动找到 controllers/application 对应的模板是templates/application.hbs -->
<h2 id="title">Welcome to Ember</h2>
<!-- Ember的属性自动更新：如果属性在controller层改变了，页面会自动刷新显示最新的值，太强大了！！！ -->
Hello, <strong>{{firstName}} {{lastName}}</strong>!
<br>
My email is <b>{{email}}</b>下面我们创建一个controller。这次我们用Ember CLI的命令创建： ember generate controller application，这句命令表示会创建一个controller并且名称是application，然后我们会得到如下几个文件：
app/controllers/application.js --controller本身
tests/unit/controllers/application-test.js --controller对应的单元测试文件
打开你的文件目录，是不是可以在app/controllers下面看到了！
现在为了演示表达式我们在controller里添加一些代码：
// app/controllers/application.js
import Ember from ''ember'';
/**
* Ember会根据命名规则自动找到templates/application.hbs这个模板，
* @type {hash} 需要设置的hash对象
*/
export default Ember.Controller.extend({
// 设置两个属性
firstName: ''chen'',
lastName: ''ubuntuvim'',
email: ''chendequanroob@gmail.com''
});然后修改显示的模板如下：
<!-- app/templates/application.hbs -->
<!-- 这个是默认的模板，Ember会根据命名的规则自动找到 controllers/application 对应的模板是templates/application.hbs -->
<h2 id="title">Welcome to Ember</h2>
<!-- Ember的属性自动更新：如果属性在controller层改变了，页面会自动刷新显示最新的值，太强大了！！！ -->
Hello, <strong>{{firstName}} {{lastName}}</strong>!
<br>
My email is <b>{{email}}</b>保存，然后页面会自动刷新，我们可以看到在controller设置的值，可以直接在模板上显示了。
这个就是表达式的绑定，后面你会学习到更多更有趣也更复杂的handlebasr表达式，HTML文档的内容会根据这下表达式的改变而改变。
随着应用程序的规模不断扩大，会有更多的模板和与之关联的控制器。并且有时候一个模板还可以对应这多个控制器。也就是说模板上表达式的值可能有多个controller控制。
ember.js – Handlebars助手和Ember Handlebars助手有什么区别？
> Ember.Handlebars.helper
> Ember.Handlebars.registerHelper
> Ember.Handlebars.registerBoundHelper
> Handlebars.registerHelper
对我来说太多了你能解释一下它有什么区别吗？
解决方法
Ember.Handlebars.registerHelper('hello',function(name) {
return 'Hello ' + name;
});
当您在模板中使用它时,
{{hello name}}
您将获得显示文本为“Hello”名称. name属性的值不被查找.
要获取你需要的帮助器的name属性的值,registerBoundHelper.顾名思义,它创建一个绑定到名称属性之间.随着名字的更改,帮助者再次被呼叫重新投递.实施方式类似,
Ember.Handlebars.registerBoundHelper('hello',function(name) {
return 'Hello ' + name;
});
Ember.Handlebars.helper与registerBoundHelper相同,还有一些额外的检查功能,可以自动检测你想要什么样的帮手.
香草Handlebars.registerHelper不在Ember中使用.它将为不使用Ember的项目创建类似的帮助.
ember.js – Handlebars帮助器返回标记
Ember.Handlebars.registerHelper 'avatarUrl',(property,options) ->
if value = Ember.get(this,property)
if small_url = value.small_url
return small_url
'/images/fallback/small_default.png'
我用这样的方式：
<img src="{{avatarUrl avatar}}" title="displayName">
上面的工作,但我想做的是返回整个img元素.
这是可能的一个手柄帮手？
解决方法
If your helper returns HTML that you do not want escaped,make sure to return a new
Handlebars.SafeString.
所以如果你希望你的帮手返回一个完整的< img>元素,然后构建您的HTML字符串并将其包装在Handlebars.SafeString中：
Ember.Handlebars.registerHelper 'avatarImg',options) -> # Build your <img> HTML string and leave it in result ... new Handlebars.SafeString(result)
然后在您的模板中,您应该可以拥有：
blah blah {{avatarImg ...}} blah blah
并获得< img>出自您的{{avatarImg …}}.
ember.js – Handlebars条件类属性
<div {{#if isSearching}}{{/if}}></div>
像这样,但是伪代码和更多的现实.
解决方法
<div {{bind-attr}}></div>
ember.js – 使用Handlebars Runtime进行预编译的ember-i18n
if you haven’t precompiled your translations,you’ll need to include
the full Handlebars,not just handlebars-runtime.js in your
application.
问题是即使使用预编译模板,一旦我们使用如下的函数Em.I18n.t,它仍然会调用Handlebars编译功能,需要完整的Handlebars.
有人知道解决方案吗？即使是函数调用,也许有预编译的最佳实践？
解决方法
/* Customized version of translation compiler */
Em.I18n.compile = function(template) {
// Full Handlebars completely disabled
//if (typeof window.Handlebars.compile === 'function')
// return window.Handlebars.compile(template);
return function(context,options){
var ret = template;
if (context !== undefined) {
$.each(context,function(key,value){
ret = ret.replace("{{"+key+"}}",value);
});
}
return ret;
}
}
这非常有效,但我并非百分之百地确信它涵盖了所有可能的情况.
关于Ember.js 入门指南——handlebars基础和emberjs教程的问题我们已经讲解完毕，感谢您的阅读，如果还想了解更多关于ember.js – Handlebars助手和Ember Handlebars助手有什么区别？、ember.js – Handlebars帮助器返回标记、ember.js – Handlebars条件类属性、ember.js – 使用Handlebars Runtime进行预编译的ember-i18n等相关内容，可以在本站寻找。
本文标签：
