显示Meteor.js中的对象的FS.File引用
我正在使用CollectionFS来允许图片上传。 图片上传需要属于特定的posts 。 我遵循文档中的步骤 – 在对象中存储FS.File引用 – 但是，我很难显示相关文章的图像。
该post目前保存一个引用image._id的postImage – 这部分工作正常。 但是，我不确定如何显示实际的照片，因为它将需要从images集合中抓取照片（ post集合只是将ID保存到引用）。
后list.html
<template name="postList"> <tr data-id="{{ _id }}" class="{{ postType }}"> ... <td><textarea name="postContent" value="{{ postContent }}"></textarea> </td> <td>{{ postImage._id }} </td> // This currently displays the correct image._id, but I would like to display the image, <td><button class="delete tiny alert">Delete</button></td> </tr> </template>
后list.js
Template.postList.helpers({ posts: function() { var currentCalendar = this._id; return Posts.find({calendarId: currentCalendar}, {sort: [["postDate","asc"]] }); } });
post-form.js – 这个表单创build一个新的Post和Image。 Image._id保存到Post.postImage。
Template.postForm.events({ // handle the form submission 'submit form': function(event) { // stop the form from submitting event.preventDefault(); // get the data we need from the form var file = $('.myFileInput').get(0).files[0]; var fileObj = Images.insert(file); var currentCalendar = this._id; var newPost = { ... calendarId: currentCalendar, owner: Meteor.userId(), postImage: fileObj, }; // create the new poll Posts.insert(newPost); } });
使用reywood:publish-composite和dburles:collection-helpers so;
集合|| collections.js
Posts = new Mongo.Collection('posts'); Images = new FS.Collection("files", { stores: [ // Store gridfs or fs ] }); Posts.helpers({ images: function() { return Images.find({ postId: this._id }); } });
模板|| template.html
<template name="postList"> {{# each posts }} {{ title }} {{# each images }} <img src="{{ url }}"> {{/each}} {{/each}} </template>
客户端|| client.js
Template.postList.helpers({ posts: function() { return Posts.find(); } }); Template.postList.events({ // handle the form submission 'submit form': function(event, template) { // stop the form from submitting event.preventDefault(); // get the data we need from the form var file = template.find('.myFileInput').files[0]; Posts.insert({ calendarId: this._id, owner: Meteor.userId() }, function(err, _id) { var image = new FS.File(file); file.postId = _id; if (!err) { Images.insert(image); } }); } });
路由器|| router.js
Router.route('/', { name: 'Index', waitOn: function() { return Meteor.subscribe('posts'); } });
服务器|| publications.js
Meteor.publishComposite('posts', function() { return { find: function() { return Posts.find({ }); }, children: [ { find: function(post) { return Images.find({ postId: post._id }); } } ] } });
在使用CollectionFS时，在客户端，您需要确保您的订阅被正确定义。 这是我开发人员在使用CFS时遇到的最大绊脚石 – 正确理解和映射订阅。
首先要做的事 – 你需要有一个订阅，将打击图像集合。 我不熟悉他们内部映射的最新CFS更新，但以下方法通常对我有用。
Meteor.publish('post', function(_id) { var post = Posts.findOne({_id: _id}); if(!post) return this.ready(); return [ Posts.find({_id: _id}), Images.find({_id: post.postImage}) ] });
为了显示，有一个方便的CFSUI包（ https://github.com/CollectionFS/Meteor-cfs-ui ），提供了一些很好的前端处理程序。
通过上面的映射你的订阅，你可以做一些类似的事情
{{#with FS.GetFile "images" post.postImage}} <img src="{{this.url store='thumbnails'}}" alt=""> {{/with}}