博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Meteor 从一个列表页进入详情页怎样高速显示详情
阅读量:6122 次
发布时间:2019-06-21

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

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

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

原文:

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">

{

{
url}}

{

{
name}}

</template>

4. 简单给出列表页 html

   
 
  
 
{
{#each apps}} {
{> appitem}} {
{/each}}
操作
 
原文:
參考:

转载地址:http://enmka.baihongyu.com/

你可能感兴趣的文章
html5 基本内容 摘自W3C
查看>>
SQL Server 连接问题案例解析(1)
查看>>
Android关于ListView中item与控件抢夺焦点的那些事
查看>>
<孤独者生存(小小辛巴投资手记)>读书笔记
查看>>
JS基础——事件绑定
查看>>
SQL collate
查看>>
tolower (Function)
查看>>
Socket网络编程--FTP客户端(2)(Windows)
查看>>
Kinect的学习笔记发展一Kinect引进和应用
查看>>
mobilebone.js 移动web APP单页切换骨架
查看>>
令人震撼的世上最牛的博士论文
查看>>
ThinkPHP多应用/项目配置技巧(使用同一配置文件)--(十六)
查看>>
正确的选择log级别
查看>>
android音乐播放器开发 SweetMusicPlayer 智能负载直插式歌词
查看>>
减少HTTP请求之合并图片详解(大型网站优化技术)
查看>>
[LeetCode OJ] Copy List with Random Pointer 扩大
查看>>
为 JIRA 6.x 安装中文语言包
查看>>
java实现顺序栈
查看>>
Comparison method violates its general contract!
查看>>
CRM项目hellokitty部分交互界面
查看>>