无论是做android开发,还是做网页web开发,都 会有列表,都须要点击列表进入列表项的详情页面,查看具体信息,能常情况下,我们都是将这一列表项的id传到详情页,由详情页再到数据库查询具体信息。

在用Meteor开发站点中。除了用传id的方法。外还提供了一种简单的方法,极大的方便了我们的开发,节省时间。

原文:http://blog.csdn.net/casun_li/article/details/46371811

1. 创建详情页的route  并传数据:

(1)如可按传id的方法。则这样:

this.route('detail', {
path: '/detail/:app_id',
data: function() {
return {app_id: this.params.app_id};//将id传入到详情页面
} }); (2)使用新方法(我将之叫做:传对象的方法)我写在后面的步骤都是按之来继续的:
this.route('detail', {
path: '/detail/:_id',
onBeforeAction: function() {
Meteor.subscribe("detailInId",this.params._id);//定阅 :定阅单条信息
this.next();
},
data: function() {
return appdocs.findOne({_id:this.params._id});//为详情页提供对象
        //此处一定要用 findOne() 而不能用find()(它得到的是一个cursor对象) 怎样一定要用则就是find({_id:_id}).fetch()[0] ,由于页面用的是这个详情的对象。而不是cursor对象
} });

2.server的推送

Meteor.publish("detailInId", function (_id) {
return appdocs.find({_id:_id});//此处要用find()页不能用findOne() 由于publish提应该提供cursor 或 数组。 });

3.详情页,点页列表页的链接<ahref="detail/{{_id}}">点击查看</a> 
进入详情后,能够直接使用详情对象来显示内容了.比如

appdocs表中有name  和 url 这两个字段 。则使用
{{url}}
{{name}}

就能显示内容,原因是在第一步的data中:return appdocs.findOne({_id:this.params._id}),meteor将它(为了理解,如果这个对象取名为:app)传入了template detail中。
因此我们在调用{{name}}时就是调用了{{app.name}}

html:

<template name="detail">

<div class="form-group">
<label class="col-sm-2 control-label">下载地址:</label>
<div class="col-sm-10">
<p class="form-control-static">{{url}}</p>
</div>
</div> <div class="form-group">
<label class="col-sm-2 control-label">应用名称:</label>
<div class="col-sm-10">
<p class="form-control-static">{{name}}</p>
</div>
</div>

</template>

4. 简单给出列表页 html

   <template name="applist">
<table class="table table-striped  table-hover">
<thead>
  <tr>
   <td >操作
</td>
  </tr>
</thead> <tbody>
{{#each apps}}
{{> appitem}}
{{/each}}
</tbody>
</table>

    </template>
<template name="appitem">

    <tr >
<td ><a href="detail/{{_id}}">点击查看</a></td>
</tr> </template>

原文:http://blog.csdn.net/casun_li/article/details/46371811
參考:https://github.com/iron-meteor/iron-router/blob/master/Guide.md

Meteor 从一个列表页进入详情页怎样高速显示详情的更多相关文章

  1. django-用户浏览记录添加及商品详情页

    视图函数views.py # /goods/商品id class DetailView(View): '''详情页''' def get(self, request, goods_id): '''显示 ...

  2. Django----使用模板系统渲染博客页面、实现列表和详情页的跳转、前后跳转功能

    .模板写法同Flask,可以参考之前的FLask-模板 .将之前的BootStrap静态页面中的数据使用模板写 <!DOCTYPE html> <html lang="en ...

  3. 如何用Baas快速在腾讯云上开发小程序-系列4:实现客户侧商品列表、商品详情页程序

    版权声明:本文由贺嘉 原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/431172001487671163 来源:腾云阁 h ...

  4. [django]详情页列表页

    详情页列表页 列表页展示titile--这个模型的部分字段 详情页展示这个模型的所有字段 我想看下related_name这个从主表取子表数据 取数据--官网投票例子 https://docs.dja ...

  5. vue项目实现列表页-详情页返回不刷新,再点其他菜单项返回刷新的需求

    问题背景:有时候一些列表会有一些跳转的需求,比如跳到详情页.或者是其他相关的页面(比如跳到用户列表去查看用户的相关信息)等,此时再返回列表页,列表页会刷新重置.目前需求就是需要改成如下情况: 问题1. ...

  6. mxonline实战13,授课讲师列表页,详情页,index页面全局导航

    对应github地址:第13天   把teacher-list.html和teacher-detail.html拷贝过来   一. 授课讲师列表页   1. 修改html文件 把org-list.ht ...

  7. mxonline实战10,课程列表页,课程详情页1

    对应github地址:第10天   一. 课程列表页   1. 拷贝course-list.html到templates目录中 2. 编写url和view 在courses/views.py中新加

  8. mui列表跳转到详情页优化方案

    原理 因为列表页到详情页是多对一的形式,即列表页的多条数据列表对应的是一个详情页,只是数据不同而:因此,可以在加载列表页时预加载详情页,即创建一个详情页的webview,但是不显示出来,点击列表的时候 ...

  9. react 从商品详情页返回到商品列表页,列表自动滚动上次浏览的位置

    现状:目前从商品详情页返回到商品列表页,还需要再去请求服务数据,还需要用户再去等待获取数据的过程,这样用户体验非常不好, 遇到的问题: 1:如何将数据缓存, 2:如何获取和保存列表滑动的高度, 3:判 ...

随机推荐

  1. Python模块目录

    阅读目录 模块 模块语法 常用模块 collections模块 time模块 random模块 os模块 sys模块 序列化模块 shelve模块 pickle模块 json模块 configpars ...

  2. bash文件名统配

    bash基础特性之globbing,即文件名通配:     文件名通配:使用元字符匹配字符         *:匹配任意长度的任意字符             假如文件名为paaaa,则pa*,*pa ...

  3. linux 安装SNV服务

    1.安装vnc server[root@pxe ~]# yum install tigervnc-server -y 2.设置 vnc server 开机启动[root@pxe ~]# chkconf ...

  4. HDU-5536 Chip Factory,又见字典树,好题+1!

    Chip Factory 题意:一个n个数的数列,求三个数其中两个数的和与另外一个数的异或值最大,输出这个最大值. 思路:和前面那个百度之星资格赛HDU4825的类似,多了两个过程,一个是枚举和,另一 ...

  5. CentOS下SWAP分区建立及释放内存详解

    方法一: 一.查看系统当前的分区情况: >free -m 二.创建用于交换分区的文件: >dd if=/dev/zero of=/whatever/swap bs=block_size ( ...

  6. 【bzoj4237】稻草人 分治+单调栈+二分

    题目描述 JOI村有一片荒地,上面竖着N个稻草人,村民们每年多次在稻草人们的周围举行祭典. 有一次,JOI村的村长听到了稻草人们的启示,计划在荒地中开垦一片田地.和启示中的一样,田地需要满足以下条件: ...

  7. [BZOJ1575] [Usaco2009 Jan]气象牛Baric(DP)

    传送门 DP f[i][j]表示前i个中选j个的最优解 预处理g[i][j]表示选i~j对答案的贡献 那么就可以n^3乱搞了! 注意边界 #include <cstdio> #includ ...

  8. 刷题总结——过河(NOIP2015)

    题目: 题目背景 NOIP2005提高组试题2. 题目描述 在河上有一座独木桥,一只青蛙想沿着独木桥从河的一侧跳到另一侧.在桥上有一些石子,青蛙很讨厌踩在这些石子上.由于桥的长度和青蛙一次跳过的距离都 ...

  9. 刷题总结——小凸玩矩阵(scoi)

    题目: 题目背景 SCOI2015 DAY1 T1 题目描述 小凸和小方是好朋友,小方给了小凸一个 n×m(n≤m)的矩阵 A,并且要求小凸从矩阵中选出 n 个数,其中任意两个数都不能在同一行或者同一 ...

  10. ElasticSearch 索引查询使用指南——详细版

    我们通常用用_cat API检测集群是否健康. 确保9200端口号可用: curl 'localhost:9200/_cat/health?v' 绿色表示一切正常, 黄色表示所有的数据可用但是部分副本 ...