0

我在 Meteor 中实现cast.js，并且在使用 Iron Router 单击缩略图后尝试渲染更大的照片，但是我无法渲染正确的路径。缩略图渲染得很好，但是当点击照片时，我得到一个错误No route found for path:。

我用来渲染每张缩略图的模板是

  var renderTemplate = function(obj){
   return "<a href='{{pathFor photo}}'><img class='img-rounded' src='" + obj.picture + "'></a>"
  };

  Template.userPhotos.rendered = function(){
    var el = this.find('#cast');
    var mycast = cast(el);
    mycast.draw(renderTemplate);

    this.handle = Meteor.autorun(function(){
      var picture = Photos.find().fetch();
      mycast
        .data(picture , '_id')
        .dynamic(150, 150, 10, 10);
    });
  }

并且放在cast这个模板的id里面

<template name="userPhotos">
  <div class="container">
    <div class="photos">
      <div id='cast'></div>
    </div>
  </div>
</template>

问题来自呈现的 href。我正在尝试传递照片_id并在下面的模板中渲染一张更大的照片，这在 mongoDB 中称为“源”。

<template name="photo">
  <div class="well">
    <img class="img-rounded" src="{{source}}">
  </div>
</template>

目前，我的路由器设置如下：

this.route('photo', {
    path: '/photo/:_id', 
    waitOn: function() {
      return [
        Meteor.subscribe('picture', this.params._id),
      ];
    },
    data: function() { return Photos.findOne(this.params._id); }
  });

单击照片后，它会将我发送到此路径并引发此错误Oh no! No route found for path: "/%7B%7BpathFor"。%7B 是 URL 的代名词，{因此当模板作为字符串传递时，它看起来像把手或 Iron Router 并没有翻译模板。

关于如何改进此代码的任何想法？

提前致谢！

4

1 回答 1

0

您的renderTemplate函数只是返回一个字符串，而不是呈现的模板。使用帮助器将您尝试在那里组装的模板重写为 Handlebars 模板：

<template name="photoLink">
  <a href="{{getPathForPhoto}}">
    <img class="img-rounded" src="{{getThumbnailSrc}}">
  </a>
</template>

和（您必须调整以下内容，因为我不知道this您的上下文中的变量具有什么属性；基本上，获取路径（或路径的组件，如_id）和缩略图路径/src此函数通过this或通过传递的参数）：

Template.photoLink.getPathForPhoto = function() {
  return "/photo/" + this._id;
}

Template.photoLink.getThumbnailSrc = function() {
  return "/thumbnail/" + this._id;
}

同样，您需要重新设计上述功能以使它们适用于您的应用程序；并且您还需要为缩略图路径创建路线。

在 Handlebars 中为每一个需要一点逻辑的小东西创建微小的 JavaScript 函数是不是很烦人？是的。但这就是它的设计方式，对不起。您可以使用其他函数从组装的字符串中呈现模板，但此功能将在下一版本的 Meteor 中消失。

于 2014-01-09T23:58:28.920 回答