Question

我正在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说话，因此看起来当把它作为字符串传递时，把手或铁路由器不会翻译模板。

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

提前致谢！

Answer 1

您的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中消失。

渲染路径与流星铁路由器

1 个答案: