MeteorJS:Autoform + CollectionFS,将 FS.Collection 中的图像与相应的 Mongo.Collection 文档相关联?
MeteorJS: Autoform + CollectionFS, associating images from an FS.Collection with Corresponding Mongo.Collection Document?
我正在构建一个非常小的 Meteor 应用程序,只是为了更好地理解 Autoform 和 CollectionFS,以及它们的结合使用。我目前使用以下软件包设置了所有内容:
iron:router, aldeed:autoform, aldeed:collection2, cfs:standard-packages,
cfs:filesystem, cfs:autoform
我有一个示例 Mongo Collection 分配给 "Books" 设置附加了 SimpleSchema,其中包含演示中的字段,如标题和作者。文件上传对应的代码为:
fileId: {
type: String,
autoform: {
afFieldInput: {
type: "cfs-file",
collection: "images"
}
}
}
FS.Collection代码是:
Images = new FS.Collection("images", {
stores: [new FS.Store.FileSystem("images", {path: "~/uploads"})]
});
这是与快速表单结合使用的:{{> quickForm collection="Books" id="insertBookForm" type="insert"}}
插入没问题,我可以遍历文档并使用空格键和名为 "books" 的辅助函数显示各个字段,如下所示:
{{#each books}}
<li>{{title}} by {{author}}</li>
{{/each}}
我还可以遍历上传到 FS.Collection 的图像,并使用助手返回整个 collection 称为 "files," 并像这样遍历它们:
{{#each files}}
<img src="{{this.url}}" />
{{/each}}
我遇到的问题是将两者联系在一起。我希望能够按照以下方式做一些事情:
{{#each books}}
<li>{{title}}, by {{author}} <img src="The-Corresponding-Image}}" /></li>
{{/each}}
显然不是那么精确的布局,但我基本上只是希望能够打印带有相应标题和作者的图像,以便能够使用带有 collectionfs 的自动格式来满足我的需要。
我一直在尝试从书籍 collection 中的特定文档中检索 fileId,然后将其插入 Images.findOne({fileId: fileId})
并将两者链接在一起。
谁能指出我正确的方向?
多亏了 Ethaan 的指导,我才能够弄明白。我必须做的是:
自动表单挂钩:
AutoForm.hooks({
insertBookForm: {
after: {
insert: function(error, result, template) {
insertedFile = Books.findOne(result).fileId;
Images.update({_id: insertedFile}, {$set: {'book': result}});
}
}
}
});
我在插入后立即将 'book' 的字段设置为正在插入的文档(存储在 result
参数中)的 _id
。
这是我对应的HTML:
{{#each books}}
<li>{{title}} by {{author}}</li>
{{#with files}}
<img src="{{this.url}}" />
{{/with}}
{{/each}}
还有我的帮手:
Template.layout.helpers({
books: function () {
return Books.find({});
},
files: function() {
return Images.findOne({book: this._id});
}
});
我正在构建一个非常小的 Meteor 应用程序,只是为了更好地理解 Autoform 和 CollectionFS,以及它们的结合使用。我目前使用以下软件包设置了所有内容:
iron:router, aldeed:autoform, aldeed:collection2, cfs:standard-packages,
cfs:filesystem, cfs:autoform
我有一个示例 Mongo Collection 分配给 "Books" 设置附加了 SimpleSchema,其中包含演示中的字段,如标题和作者。文件上传对应的代码为:
fileId: {
type: String,
autoform: {
afFieldInput: {
type: "cfs-file",
collection: "images"
}
}
}
FS.Collection代码是:
Images = new FS.Collection("images", {
stores: [new FS.Store.FileSystem("images", {path: "~/uploads"})]
});
这是与快速表单结合使用的:{{> quickForm collection="Books" id="insertBookForm" type="insert"}}
插入没问题,我可以遍历文档并使用空格键和名为 "books" 的辅助函数显示各个字段,如下所示:
{{#each books}}
<li>{{title}} by {{author}}</li>
{{/each}}
我还可以遍历上传到 FS.Collection 的图像,并使用助手返回整个 collection 称为 "files," 并像这样遍历它们:
{{#each files}}
<img src="{{this.url}}" />
{{/each}}
我遇到的问题是将两者联系在一起。我希望能够按照以下方式做一些事情:
{{#each books}}
<li>{{title}}, by {{author}} <img src="The-Corresponding-Image}}" /></li>
{{/each}}
显然不是那么精确的布局,但我基本上只是希望能够打印带有相应标题和作者的图像,以便能够使用带有 collectionfs 的自动格式来满足我的需要。
我一直在尝试从书籍 collection 中的特定文档中检索 fileId,然后将其插入 Images.findOne({fileId: fileId})
并将两者链接在一起。
谁能指出我正确的方向?
多亏了 Ethaan 的指导,我才能够弄明白。我必须做的是:
自动表单挂钩:
AutoForm.hooks({
insertBookForm: {
after: {
insert: function(error, result, template) {
insertedFile = Books.findOne(result).fileId;
Images.update({_id: insertedFile}, {$set: {'book': result}});
}
}
}
});
我在插入后立即将 'book' 的字段设置为正在插入的文档(存储在 result
参数中)的 _id
。
这是我对应的HTML:
{{#each books}}
<li>{{title}} by {{author}}</li>
{{#with files}}
<img src="{{this.url}}" />
{{/with}}
{{/each}}
还有我的帮手:
Template.layout.helpers({
books: function () {
return Books.find({});
},
files: function() {
return Images.findOne({book: this._id});
}
});