文档章节

Ember.js 入门指南——{{link-to}} 助手

ubuntuvim
 ubuntuvim
发布于 2015/09/19 01:59
字数 2727
阅读 2542
收藏 33

如果你不是从前面的文章看下来的你可能需要使用Ember CLI构建一个Ember项目,在Ember CLI的官网与非常详细的解释教程,不过如果你只是为了构建一个Ember项目的框架你只需要三步就可以构建。

ember new appName

cd appName

ember server

只需要在你的终端、控制台执行这3条命令即可,不过在使用这些命令之前你需要安装node、npm等插件!!不过如果是安装Ember CLI网站上的步骤安装应该是很容易的!!


1link-to助手常规使用

link-to助手表达式渲染之后就是一个a标签。而a标签的href属性的值是根据路由生成的,与路由的设置是息息相关的。并且每个设置的路由名称都是有着对应的关系的。

为了演示效果,用命令生成了一个route(或者手动创建文件)并获取测试数据。本文结合路由设置,随便串讲了一些路由方面的知识,如果你能看懂最好了,看不懂也不要紧后面会有一整章介绍路由。

1,  增加子路由
//  app/routers.js
 
import Ember from 'ember';
import config from './config/environment';
 
var Router = Ember.Router.extend({
  location: config.locationType    
});
 
Router.map(function() {
  this.route('posts', function() {
     this.route('detail', {path: '/:post_id'});  //指定子路由,:post_id会自动转换为数据的id
  });
});
 
export default Router;

如上述代码,在posts下增加一个子路由detail。并且指定路由名为“/:post_id”“:post_id”是一个动态字段,一般情况下默认为modelid属性。经过模板渲染之后会得到类似于“posts/1”“posts/2”这种形式的路由。

2,  route初始化数据
//  app/routes/posts.js
 
import Ember from 'ember';
 
export default Ember.Route.extend({
       model: function() {
              return Ember.$.getJSON('https://api.github.com/repos/emberjs/ember.js/pulls');
       }
});

使用Ember提供的方法直接从远程获取测试数据。测试数据的格式可以用浏览器直接打开上面的URL就可以看到。

3,  添加显示的模板
<!--  //  app/templates/posts.hbs  -->
 
<div>
       <div>
              <div class="col-md-10 col-xs-10">
                     <div style="margin-top: 70px;">
                            <ul>
                            {{#each model as |item|}}
                                   <li>
                                          <!--设置路由,路由的层级与router.js里定义的要一致 -->
                     {{#link-to 'posts.detail' item}}
                                                 {{item.title}}
                                          {{/link-to}}
                                   </li>
                            {{/each}}
                            </ul>
                     </div>
              </div>
       </div>
</div>

    直接用{{#each}}遍历出所有的数据,并显示在界面上,由于数据比较多可能显示的比较慢,特别是页面刷新之后看到一片空白,请不要急着刷新页面,等待一下即可……。下图是结果的一部分:

图片 1.png

我们查看页面的源代码,可以看到link-to助手渲染之后的HTML代码,自动生成了URL,在router.js里配置的post_id渲染之后都被modelid属性值代替了。

                                             

如果你没有测试数据,你还可直接把link-to助手post_id写死,可以直接把数据的id值设置到link-to助手上。在模板文件的ul标签下一行增加如下代码,在link-to助手中指定id1

<!-- 增加一条直接指定id的数据 -->
  <li>
    {{#link-to 'posts.detail' 1}}增加一条直接指定id的数据{{/link-to}}
  </li>

渲染之后的HTML代码为

<li>
<a id="ember404" href="/posts/1">增加一条直接指定id的数据
</a>
</li>

可以看到与前面使用动态数据渲染之后的href的格式是一样的。如果你想设置某个a标签是激活状态,你可以直接在标签上增加一个CSS类(class=”active”)。

 

2link-to助手设置多个动态字段

       开发中,路由的路径经常不是2层的(post/1)也有可能是多层次的(post/1/commentpost/1/2或者post/1/comment/2等等形式。),如果是这种形式的URLlink-to助手上又要怎么去定义呢?

老样子,在演示模板之前还是需要先构建好测试数据以及修改对应的路由设置,此时的路由设置是多层的,因为link-to助手渲染之后得到的href属性值就是根据路由生成的!!!这个必须要记得……

1,  一个路由下有个多子路由
//  app/routers.js
 
import Ember from 'ember';
import config from './config/environment';
 
var Router = Ember.Router.extend({
  location: config.locationType    
});
 
Router.map(function() {
  // this.route('handlebarsConditionsExpRoute');
  // this.route('handlebars-each');
  // this.route('store-categories');
  // this.route('binding-element-attributes');
 
  //  link-to实例理由配置
  // this.route('link-to-helper-example', function() {
  //  this.route('edit', {path: '/:link-to-helper-example_id'});
  // });
 
  this.route('posts', function() {
      //指定子路由,:post_id会自动转换为数据的id
     this.route('detail', {path: '/:post_id'}, function() {
      //增加一个comments路由
      this.route('comments');
      // 第二个子路由comment,并且路由是个动态字段comment_id
      this.route('comment', {path: '/:comment_id'});
    });
  });
 
});
 
export default Router;

如果是上述配置,渲染之后得到的路由格式posts/detail/comments。由于获取远程数据比较慢直接注释掉posts.js里的model回调方法,就直接使用写死id的方式。

注意:上述配置中,在路由detail下有2个子路由,一个是comments,一个是comment,并且这个是一个动态段。由此模板渲染之后应该是有2种形式的URL。一种是posts.detail.commentsposts/1/comments),另一种是posts.detail.commentposts/1/2)。如果能理解这个那route嵌套层次再多应该也能看明白了!

<!--  //  app/templates/posts.hbs  -->
 
<div>
       <div>
              <div class="col-md-10 col-xs-10">
                     <div style="margin-top: 70px;">
                            <ul>
                                   <!-- 增加一条直接指定id的数据 -->
                                   <li>
                                          <!—- 注意此时只有一个动态段,所以只有一个数字1,Ember会根据顺序自动匹配到动态段的位置上。 -->
                                          {{#link-to 'posts.detail.comments' 1}}
                                          posts.detail.comments(posts/1/comments)形式
                                          {{/link-to}}
                                   </li>
 
 
                                   <li>
                                          <!—-
                                          注意此时有2个动态段,所以有2个数字1,2,Ember会根据顺序自动匹配到动态段的位置上。
                                          第一个数字1会匹配到第一个动态段post_id上,第二个数字2会匹配到动态段comment_id上
                                           -->
                                          {{#link-to 'posts.detail.comment' 1 2}}
                                          posts.detail.comment(posts/1/2)形式
                                          {{/link-to}}
                                   </li>
 
                            </ul>
                     </div>
              </div>
       </div>
</div>

渲染之后的html结果如下:

图片2.png

如果是动态段的一般都是modelid代替,如果不是动态段的直接显示配置的路由名称。

2,  多层路由嵌套

上面演示了多个子路由的情况,下面接着介绍一个路由有多个层次,并且是有个多个动态段和非动态段组成的情况。

       首先修改路由配置,把comments设置为detail的子路由。并且在comments下在设置一个动态段的子路由comment_id

//  app/routers.js
 
import Ember from 'ember';
import config from './config/environment';
 
var Router = Ember.Router.extend({
  location: config.locationType    
});
 
Router.map(function() {
  this.route('posts', function() {
      //指定子路由,:post_id会自动转换为数据的id
    this.route('detail', {path: '/:post_id'}, function() {
      //增加一个comments路由
      this.route('comments', function() {
        // 在comments下面再增加一个子路由comment,并且路由是个动态字段comment_id
        this.route('comment', {path: '/:comment_id'});
      });  
    });
  });
});
export default Router;

模板使用路由的方式posts.detail.comments.comment。正常情况应该生成类似posts/1/comments/2这种格式的URL

<!--  //  app/templates/posts.hbs  -->
 
<div>
       <div>
              <div class="col-md-10 col-xs-10">
                     <div style="margin-top: 70px;">
                            <ul>
 
                                   <li>
                                          <!--
                                                 一共设置了4层路由
                                           -->
                                          {{#link-to 'posts.detail.comments.comment' 1 2}}
                                          posts.detail.comments.comment(posts/1/comments/2)形式
                                          {{/link-to}}
                                   </li>
 
                            </ul>
                     </div>
              </div>
       </div>
</div>

渲染之后得到的HTML如下:

<ul>
  <li>
  <!-- 一共设置了4层路由 -->
    <a id="ember473" href="/posts/1/comments/2" class="active ember-view">                                         posts.detail.comments.comment(posts/1/comments/2)形式
    </a>
  </li>
</ul>

结果正如我们预想的组成了4层路由(/posts/1/comment/2)。

补充内容

对于上述第二点多层路由嵌套的情况你还可以使用下面的方式设置路由和模板,并且可用同时设置了/posts/1/comments/posts/1/comments/2

this.route('posts', function() {
      //指定子路由,:post_id会自动转换为数据的id
     this.route('detail', {path: '/:post_id'}, function() {
      //增加一个comments路由
      this.route('comments');
      // 注意区分与前面的设置方式,comment渲染之后直接被comments/:comment_id替换了,会得到如posts/1/comments/2这种形式的URL
      this.route('comment', {path: 'comments/:comment_id'});
    });
  });
<!--  //  app/templates/posts.hbs  -->
 
<div>
       <div>
              <div class="col-md-10 col-xs-10">
                     <div style="margin-top: 70px;">
                            <ul>
 
                                   <li>
                                          <-- 设置的方式不变 -->
                    {{#link-to 'posts.detail.comments' 1}}
                                          posts.detail.comments(/posts/1/comments)形式
                                          {{/link-to}}
                                   </li>
 
                                   <li>
                                          <!--
                                                 一共设置了4层路由,与前面的设置方式一样
                                           -->
                                          {{#link-to 'posts.detail.comment' 1 2}}
                                          posts.detail.comments.comment(posts/1/comments/2)形式
                                          {{/link-to}}
                                   </li>
 
 
                            </ul>
                     </div>
              </div>
       </div>
</div>

渲染之后的HTML结果如下:

3.png

两种方式定义的路由渲染的结果是一样的,看个人喜欢了,定义方式也是非常灵活的。第一种定义方式看着比较清晰,看代码就知道是一层层的。但是需要写更多代码。第二种定义方式更加简洁,不过看不出嵌套的层次。

       对于上述route的设置如果还不能理解也不要紧,后面会有一整章是介绍路由的,然而你能结合link-to助手理解了路由设置对于后面route章节的学习是非常有帮助的。

3,  link-to助手内增加额外属性

handlebars允许你直接在link-to助手增加额外的属性,经过模板渲染之后a标签就有了增加的额外属性了。

比如你可用为a标签增加CSSclass

handlebars允许你直接在link-to助手增加额外的属性,经过模板渲染之后a标签就有了增加的额外属性了。

    比如你可用为a标签增加CSSclass

{{link-to "show text info" 'posts.detail' 1 class="btn btn-primary"}}

{{#link-to "posts.detail" 1   class="btn btn-primary"}}show text info{{/link-to}}

上述两种写法都是可以的,渲染的结果也是一样的。渲染之后的HTML为:

<a id="ember434"   href="/posts/1" class="btn btn-primary   ember-view">show text info</a>

注意:上述两种方式的写法所设置的参数的位置不能调换。但是官网没有看到这方面的说明,有可能是我的演示实例的问题,如果读者你的可用欢迎给我留言。

第一种方式,显示的文字必须放在最前面,并且中间的参数是路由设置,最有一个参数是额外的属性设置,如果你还要其他的属性需要设置仍然只能放在最后面。

第二章方式的参数位置也是有要求的,第一个参数必须是路由设置,后面的参数设置额外的属性。

对于渲染之后的HTML代码中出现标签idember,或者ember-xxx,这些属性都是Ember默认生成的,我们可以暂时不用理它。

综合,本来这篇是讲解link-to的,但是由于涉及到了route的配置就顺便讲讲,有点难度,主要在路由的嵌套这个知识点上,但是对于后面的route这一章的学习是很有帮助的,route的设置几乎都是为URL设置的。这两者是紧密关联的!


© 著作权归作者所有

ubuntuvim
粉丝 33
博文 76
码字总数 98477
作品 1
深圳
后端工程师
私信 提问
加载中

评论(2)

ubuntuvim
ubuntuvim 博主

引用来自“Lkmd”的评论

谢谢!其实写得很浅,希望能在后面的文章能深入点……
L
Lkmd
Ember.js 入门指南——总目录

Ember.js 是什么?我想对于想学习它的人应该知道它是个什么东西,如果你想了解那就赶紧去 Google 或者百度,本系列教程是通过学习官网教程然后摘抄个人觉得比较重要的部分,加上学习实例整合...

ubuntuvim
2015/10/25
1K
2
Ember.js 入门指南——路由定义

当你的应用启动的时候,路由器就会匹配当前的URL到你定义的路由上。然后按照定义的路由层次逐个加载数据、设置应用程序状态、渲染路由对应的模板。 1,基本路由 在app/router.js的map方法里定...

ubuntuvim
2015/09/24
3.6K
8
Ember.js 入门指南--目录

本系列文章全部从(http://ibeginner.sinaapp.com/)迁移过来,欢迎访问原网站。 Ember.js 是什么?我想对于想学习它的人应该知道它是个什么东西,如果你想了解那就赶紧去 Google 或者百度,...

ubuntuvim
2015/09/07
390
2
Ember.js 入门指南——路由简介

从本文开始,将为大家介绍路由(route),如果你看过前面的《Ember.js 入门指南——{{link-to}} 助手》这篇文章应该初步了解了route。不过在这篇文章中只是简单介绍了路由是定义、路由层次,...

ubuntuvim
2015/09/22
476
0
Ember.js 入门指南——属性传递

出处:http://blog.ddlisting.com/2016/04/07/ember-js-ru-men-zhi-nan-zhi-er-shi-jiu-shu-xing-chuan-di/ 1,传递参数到组件上 每个组件都是相对独立的,因此任何组件所需的数据都需要通过...

ubuntuvim
2015/10/09
465
0

没有更多内容

加载失败,请刷新页面

加载更多

代理模式之JDK动态代理 — “JDK Dynamic Proxy“

动态代理的原理是什么? 所谓的动态代理,他是一个代理机制,代理机制可以看作是对调用目标的一个包装,这样我们对目标代码的调用不是直接发生的,而是通过代理完成,通过代理可以有效的让调...

code-ortaerc
今天
5
0
学习记录(day05-标签操作、属性绑定、语句控制、数据绑定、事件绑定、案例用户登录)

[TOC] 1.1.1标签操作v-text&v-html v-text:会把data中绑定的数据值原样输出。 v-html:会把data中值输出,且会自动解析html代码 <!--可以将指定的内容显示到标签体中--><标签 v-text=""></......

庭前云落
今天
8
0
VMware vSphere的两种RDM磁盘

在VMware vSphere vCenter中创建虚拟机时,可以添加一种叫RDM的磁盘。 RDM - Raw Device Mapping,原始设备映射,那么,RDM磁盘是不是就可以称作为“原始设备映射磁盘”呢?这也是一种可以热...

大别阿郎
今天
12
0
【AngularJS学习笔记】02 小杂烩及学习总结

本文转载于:专业的前端网站☞【AngularJS学习笔记】02 小杂烩及学习总结 表格示例 <div ng-app="myApp" ng-controller="customersCtrl"> <table> <tr ng-repeat="x in names | orderBy ......

前端老手
昨天
16
0
Linux 内核的五大创新

在科技行业,创新这个词几乎和革命一样到处泛滥,所以很难将那些夸张的东西与真正令人振奋的东西区分开来。Linux内核被称为创新,但它又被称为现代计算中最大的奇迹,一个微观世界中的庞然大...

阮鹏
昨天
20
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部