javascript - 如何让pathFor根据this.params._id创建URL路径?

标签 javascript meteor

无法为单个项目创建可点击的链接:

router.js:

Router.route('/projects/:_id', {
  name: 'projectPage',
  template: 'projectPage',
  data: function() {
    return Projects.findOne({ _id: this.params._id })
  }
})

project_list.html:

<template name="projectList">
  <div class="col-md-10">
    <div class="row">
      <h2 class="page-header">My Lessons</h2>
      {{#each projects}}
        {{> project}}
      {{/each}}
    </div>
  </div>
</template>

project.html:

<template name="project">
  <div class="col-md-4">
    <div class="thumbnail">
      <img src="thumb-1.png" alt="...">
      <div class="caption">
        <h3>{{title}}</h3>
        <p>{{description}}</p>
        <p><a href="{{pathFor 'projectPage'}}" class="btn btn-primary" role="button">Check out</a></p>
      </div>
    </div>
  </div>
</template>

project_page.html:

<template name="projectPage">
  <div class="col-md-10">
    <div class="row">
      <h2 class="page-header">{{title}}</h2>
      <h2 class="page-header">{{description}}</h2>
    </div>
  </div>
</template>

我得到这个奇怪的 URL:http://localhost:3000/projects/ObjectID(%22566b810371d07711cf9d6680%22)

我被带到 projectPage 但什么也没有显示。

我做错了什么?

最佳答案

问题是 iron router 在您项目的 _id 中看到一个 ObjectID,它希望在其中找到一个 String。您可以改用以下代码,即时将您的 ObjectID 转换为字符串:

project.html:

<template name="project">
  <div class="col-md-4">
    <div class="thumbnail">
      <img src="thumb-1.png" alt="...">
      <div class="caption">
        <h3>{{title}}</h3>
        <p>{{description}}</p>
        <p><a href="{{pathFor 'projectPage' _id=this._id.toHexString}}" class="btn btn-primary" role="button">Check out</a></p>
      </div>
    </div>
  </div>
</template>

但随后您必须在您的 route 将其转换回 ObjectID:

router.js:

Router.route('/projects/:_id', {
  name: 'projectPage',
  template: 'projectPage',
  data: function() {
    return Projects.findOne({ _id: new Meteor.Collection.ObjectID(this.params._id) })
  }
})

关于javascript - 如何让pathFor根据this.params._id创建URL路径?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34290459/

相关文章:

javascript - 通过javascript获取URL变量

javascript - 使用jquery隐藏表头中的图像

meteor - 在 DOM 初始化后加载数据时显示加载器

javascript - ReactJS 和 Meteor : Generating <select> options?

javascript - meteor 和 react : Correct way to manipulate elements on click?

meteor - 将 Meteor 用户发布到管理员

javascript - 单击它时如何使一个div越过另一个div?

javascript - 触发 fluffy.js

javascript - 使用 CSS3 字体拉伸(stretch)而不是换行

xml - 如何在 Meteor 后端解析 XML?