• 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.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

  • 相关阅读:
    收藏夹
    获取某个元素在页面上的偏移量
    React多行文本溢出处理(仅针对纯文本)
    react
    CDN初学搭建(ats)
    linux查看cpu、内存、版本信息
    MySQL5.6版本性能调优my.cnf详解
    How to install cacti on centos 6
    win10安装.net3.5 报错解决
    CentOS6.5安装Cacti统计图乱码解决
  • 原文地址:https://www.cnblogs.com/yfceshi/p/7209586.html
Copyright © 2020-2023  润新知