博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
3.11 Templates --Rendering with Helpers
阅读量:6225 次
发布时间:2019-06-21

本文共 1867 字,大约阅读时间需要 6 分钟。

Ember提供几个辅助器允许你使用不同的方法渲染模板(render templates)。

一、The {

{partial}} Helper

{

{partial}}以呈现的模板作为参数,并在这里呈现模板。

{

{partial}}不改变上下文或作用域。它简单的将给定的模板放置到当前作用域中。

app/templates/author.hbs

Written by {
{author.firstName}} {
{author.lastName}}

app/templates/post.hbs

{
{title}}

{
{body}}
{
{partial "author"}}

输出:

Why You Should Use Ember.js

Because it's awesome!
Written by Yehuda Katz

二、The {

{render}} Helper

1. {

{render}}取两个参数:

  • 第一个参数描述设定的上下文。
  • 可选的第二个参数是model,如果提供了它将被传递到controller

2. {

{render}做了几件事:

  • 当没有提供模型时,它会得到相应controller
  • 当提供一个模型时,它会得到一个唯一的controller
  • 使用controller命名模板。
  • 设置相应controllermodel

3. 稍微修改下上面的例子:

app/templates/author.hbs

Written by {
{firstName}} {
{lastName}}.Total Posts: {
{postCount}}

app/templates/post.hbs

{
{title}}

{
{body}}
{
{render "author" author}}

app/controllers/author.js

export default Ember.Controller.extend({  postCount: Ember.computed('model.posts.[]', function() {    return this.get('model.posts.length');  })})

在例子中,render将会:

  • 使用相应的模板(例子中默认为"author")
  • 获得或者生成AuthorController的单例
  • 设置AuthorController's model为传递给render的第二个参数,这里传递的是author对象。
  • 使用上一步中创建的上下文在适当的位置渲染模板。

4.{

{render}}{
{outlet}}
的区别

{

{render}}不要求一个匹配路由的存在。

{

{render}}{
{outlet}}
有一点类似。都告诉Ember放入页面这部分东西。

{

{outlet}}:路由器确定路由,并设置适当的控制器/视图/模型。

{

{render}}:你直接或者间接的指定适当的控制器/视图/模型。

注意:当没有指定model时,对同一个路由来说{

{render}}不能被多次调用。

三、Comparison Table(比较表)

1. 一般的

Helper Template Model Controller
{
{partial}}
Specified Template Current Model Current Controller
{
{render}}
Template Specified Model Specified Controller

2. 特定的

Helper Template Model Controller
{
{partial "author"}}
templates/author.hbs models/post.js controllers/post.js
{
{render "author" author}}
templates/author.hbs models/author.js controllers/author.js

转载于:https://www.cnblogs.com/sunshineground/p/5153280.html

你可能感兴趣的文章
艾普联手OPENSTACK 打造公众云
查看>>
从线上卖到线下,秘籍在这里|千牛头条双11直播
查看>>
李飞飞:为什么计算机视觉对机器人如此重要?
查看>>
数据的价值 删除无用数据可降低风险
查看>>
2017年五大关键云趋势:容器、AI等
查看>>
JedisPool资源池优化
查看>>
数据库安全专家指出数据库取证仍然落后
查看>>
5G新规范:个人网络速度不低于下行100兆 上行50兆
查看>>
TensorFlow博客翻译——DeepMind转向TensorFlow
查看>>
信息化治理与北京治堵:疏图同归
查看>>
专访Dan Kohn:阡陌交迭,云原生布局开源生态构建及深度应用
查看>>
在Linux中添加普通新用户
查看>>
beego小技巧两则:通过命令行自定义端口和环境,url中带有中划线处理
查看>>
跨国引入强势技术 安全行业又添生力军
查看>>
吸烟损害健康,电子烟损害电脑,分分钟让电脑变砖
查看>>
市场井喷 到家服务将颠覆在线教育模式
查看>>
阿里云发布高IO实例 存储性能比通用型提升300%
查看>>
专访声网CEO赵斌:实时互联网正深入影响垂直领域
查看>>
中国人工智能学会通讯——新一轮人工智能发展的三大特征及其展望 1.1 新一轮人工智能发展的三个特征...
查看>>
超大规模数据中心运营商Switch公司申请IPO
查看>>