Meteor 从一个列表页进入详情页如何快速显示详情

不管是做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.服务器的推送

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

时间: 2024-10-15 08:39:33

Meteor 从一个列表页进入详情页如何快速显示详情的相关文章

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

视图函数views.py # /goods/商品id class DetailView(View): '''详情页''' def get(self, request, goods_id): '''显示详情页''' try: sku = GoodsSKU.objects.get(id=goods_id) except GoodsSKU.DoesNotExist: # 商品不存在 return redirect(reverse('goods:index')) # 获取商品的分类信息 types =

微信 HTML5 实现列表页与详情页无刷新返回 seesionStorage

最近在最微信端开发,遇到了一个比较有意思的问题. 1:商品分页列表页 2:商品详情页 需求:  实现当在第N页的列表页,点击ID=Num的商品详情页,跳转到详情页后,再点击返回按钮,依旧返回到列表第N页,并显式的改变ID=Num商品的查看状态 注:详情页与列表页是两个视图页,并且要考虑弱网请求服务端接口比较慢的情况 解决思路:使用sessionStorage 在列表页中将请求服务端接口返回的列表信息使用一个对象dataList存储起来,并记录当前的页码pageIndex,当点击跳转某个商品详情页

Activity 切换动画(小米图库列表进入详情页,图片从固定位置放大进入,缩小退出)

直接上效果图 ok,来分析下如何实现的吧 分析原理 首先确定,这是两个不同的 Activity,从图片列表页跳入到图片详情页:先来看进入详情页时的动画,从列表中所在 item 的位置一直放大到详情页的显示位置,这里我可以先告诉大家,当我们点击了这个 item 的时候,就已经启动了详情页,然后在详情页做相应的动画效果.既然是在详情页做动画效果,就需要在列表页把相应的值传过去,列表页 item 在屏幕上的位置,item 的大小,当然还有图片的资源,然后在详情页计算动画执行的参数.分析了进入动画,那么

[django]详情页列表页

详情页列表页 列表页展示titile--这个模型的部分字段 详情页展示这个模型的所有字段 我想看下related_name这个从主表取子表数据 取数据--官网投票例子 https://docs.djangoproject.com/en/2.1/intro/tutorial02/ polls/models.py from django.db import models class Question(models.Model): question_text = models.CharField(ma

【实战】Ozon产品列表页及产品详情页nodejs爬虫

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 { "name": "1", "version": "1.0.0", "description": "", "main": "index.js", "dependencies": { "fs": "^0.

element ui源码解析 -- Pagination篇( 副:列表页进入详情页再返回后,如何保持当前页码正确 )

之所以看Pagination源码,由于一个问题: 需求:从列表页进入详情页后再返回,需求方希望保持在当前的页码而不是重新定位到第一页 问题:按照element ui文档设置current-page后请求的数据正常,但pagination的页码显示却不正确,不管current-page值等于多少,永远显示第一页 解决方案: 1. 改 :current-page="currentPage" 为 :current-page.sync="currentPage" 2.查询接

如何设计一个优秀的电子商务产品详情页

http://c.jinhusns.com/cms/c-3256/?type=xcj 如何设计一个优秀的电子商务产品详情页 电子商务网站的产品详情页面无疑是设计师和开发人员关注的最重要的网页之一.产品详情页面是客户作出“加入购物车”决定的页面,也是搜索引擎的结果页面.和我们一起去探索什么样的伟大元素可以设计出一个成功的产品详细页吧. 电子商务产品详情页设计(E-commerce Website Design) 设计,可用性和搜索引擎营销的工作对于一个电子商务项目是紧密相联的.是时候开始了,让我们

微信小程序 项目实战(三)list 列表页 及 item 详情页

1.项目结构 2.list 列表页 (1)数据(逻辑) list.js // pages/list/list.js Page({ /** * 页面的初始数据 */ data: { title: '加载中...', // 状态 list: [], // 数据列表 type: '', // 数据类型 loading: true // 显示等待框 }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { // options 为 board页传来的

Vue详情页回列表页保存原数据与位置。

列表页关键代码 mounted() { //非从详情页返回时正常加载数据 if (!this.$route.meta.isBack) { //执行加载数据的方法 //重新加载页面 } else { // this.onFetching = true; this.curPage = sessionStorage.getItem('curPage'); //存储分页第几页,用于返回列表页继续可以分页 ... } //执行完初始化isBack this.$route.meta.isBack = fal