[英]In Meteor, how can I link a collectionFS image to the right document?
I actually found this answer but I couldn't really get it. 我实际上找到了这个答案,但我真的没明白。
So, I have this mongo collection, I want to link the image from the collectionFS to the proper parent document. 所以,我有这个mongo集合,我想将图像从collectionFS链接到正确的父文档。 How can I do it?
我该怎么做? Here's the code :
这是代码:
the declaration of the collections 集合的声明
AccommodationList = new Mongo.Collection('accommodation');
ImagesAcc = new FS.Collection("imagesacc", {
stores: [new FS.Store.FileSystem("imagesacc", {path: "~/uploads"})]
});
if(Meteor.isClient){
Template.accommodations.helpers({
'accommodation': function(){
return AccommodationList.find();
}
});
Template.photopageaccommodation.helpers({
imagesacc: ImagesAcc.find()
});
Template.photopageaccommodation.events({
'dblclick .uploadedImage': function(e){
var confirm = window.confirm("Etes-vous sur ??");
if(confirm){
ImagesAcc.remove({_id:this._id});
Bert.alert('Vous venez de supprimer', 'warning', 'growl-top-right');
}
}
});
Template.photopageaccommodation.events({
'change #accfile': function(event, template) {
event.preventDefault();
FS.Utility.eachFile(event, function(file) {
ImagesAcc.insert(file, function (err, fileObj) {
//Inserted new doc with ID fileObj._id, and kicked off the data upload using HTTP
});
});
}
});
}
the submit form 提交表格
Template.accommodations.events({
'submit #accommodation': function(){
event.preventDefault();
var accommodationNomVar = event.target.nom.value;
var accommodationDescriptionVar = event.target.description.value;
var accommodationTarifVar = event.target.tarif.value;
var accommodationNbrEtoilesVar = event.target.nbretoiles.value;
var accommodationTypeExcluVar = event.target.typeexclu.value;
var accommodationTypeVar = event.target.type.value;
var accommodationAddresseVar = event.target.addresse.value;
var accommodationTelephoneVar = event.target.telephone.value;
var accommodationEmailVar = event.target.email.value;
AccommodationList.insert({
nom: accommodationNomVar,
description: accommodationDescriptionVar,
tarif: accommodationTarifVar,
nbretoiles: accommodationNbrEtoilesVar,
typeexclu: accommodationTypeExcluVar,
type: accommodationTypeVar,
addresse: accommodationAddresseVar,
email: accommodationEmailVar,
telephone: accommodationTelephoneVar,
});
event.target.reset();
},
'click .delete': function(){
var confirm = window.confirm("Etes-vous sur ??");
if(confirm){
AccommodationList.remove(this._id);
Bert.alert('Vous venez de supprimer', 'warning', 'growl-top-right');
}
},
});
here's the template 这是模板
<template name="accommodations">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<form id="accommodation">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Nom</label>
<input type="text" class="form-control" placeholder="Nom" name="nom">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Type</label>
<input type="text" class="form-control" placeholder="Type" name="type">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label>Description</label>
<input type="text" class="form-control" placeholder="Description" name="description">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label>Nombre d'etoiles</label>
<input type="number" class="form-control" placeholder="Nombre d'etoiles" name="nbretoiles">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label>Type d'exclusivite</label>
<input type="text" class="form-control" placeholder="Type d'exclusivite" name="typeexclu">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label>Tarif</label>
<input type="number" class="form-control" placeholder="Tarif" name="tarif">
</div>
</div>
</div>
<div class="row">
<div class="col-md-5">
<div class="form-group">
<label>Telephone</label>
<input type="text" class="form-control" placeholder="Telephone" name="telephone">
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control" placeholder="Email" name="email">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label>Addresse</label>
<input type="text" class="form-control" placeholder="Addresse" name="addresse">
</div>
</div>
</div>
<div class="row">
<button type="submit" class="btn btn-info btn-fill pull-right">Ajouter</button>
<div class="clearfix"></div>
</div>
</form>
</div>
</div>
<br>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="header">
<h4 class="title">Table des accommodations</h4>
<p class="category">Here is a subtitle for this table</p>
</div>
<div class="content table-responsive table-full-width">
<table class="table table-hover table-striped">
<thead>
<th>ID</th>
<th>Nom</th>
<th>Type</th>
<th>Description</th>
<th>Etoiles</th>
<th>Tarif</th>
<th>Telephone</th>
<th>Email</th>
<th>Adresse</th>
<th></th>
</thead>
<tbody>
{{#each accommodation}}
<tr>
<td>{{id}}</td>
<td>{{> editableText collection="accommodation" field="nom" eventType="dblclick"}}</td>
<td>{{> editableText collection="accommodation" field="type" eventType="dblclick"}}</td>
<td>{{> editableText collection="accommodation" field="description" eventType="dblclick"}}</td>
<td>{{> editableText collection="accommodation" field="nbretoiles" eventType="dblclick"}}</td>
<td>{{> editableText collection="accommodation" field="tarif" eventType="dblclick"}}</td>
<td>{{> editableText collection="accommodation" field="telephone" eventType="dblclick"}}</td>
<td>{{> editableText collection="accommodation" field="email" eventType="dblclick"}}</td>
<td>{{> editableText collection="accommodation" field="addresse" eventType="dblclick"}}</td>
<td><a class="delete"><a class="btn btn-danger"><i class="fa fa-trash"></i></a></a>
<a href="photopageaccommodation"><a class="btn btn-gray"><i class="fa fa-camera"></i></a></a></td>
</tr>
{{/each}}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
and here's the template where the image is actually loaded from and displayed 这是实际从中加载并显示图像的模板
<template name="photopageaccommodation">
<style>
.section-title h2 {
display: inline-block;
font-size: 30px;
font-weight: 300;
line-height: 30px;
margin-bottom: 40px;
padding-bottom: 10px;
position: relative;
text-transform: uppercase;
}
.section-title h2:before {
position: absolute;
background: #575757;
height: 2px;
width: 45px;
content: "";
bottom: 0;
}
.portfolio-menu button.mixitup-control-active {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
border: 2px solid #4bcaff;
color: #4bcaff;
padding: 10px 15px;
font-weight: 700;
transition: .4s;
text-transform: uppercase;
}
.portfolio-menu button {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
border: 2px solid transparent;
color: #515f67;
padding: 10px 15px;
font-weight: 700;
text-transform: uppercase;
cursor: pointer;
}
.single-portfolio a {
display: block;
line-height: 0;
position: relative;
}
.single-portfolio a::before {
background: #000 none repeat scroll 0 0;
content: "";
height: 100%;
opacity: 0;
position: absolute;
top: 0;
transform: scale(0.5);
transition: all 0.3s ease 0s;
width: 100%;
}
.single-portfolio:hover a::before {
opacity: .5;
transform: scale(1);
}
.single-portfolio a::after {
color: #fff;
content: "+";
font-size: 60px;
left: 0;
position: absolute;
right: 0;
text-align: center;
top: 50%;
transform: scale(0);
transition: all 0.3s ease 0s;
}
.single-portfolio:hover a::after {
transform: scale(1);
}
</style>
<script>
$(document).ready(function() {
// This will create a single gallery from all elements that have class "gallery-item"
$('.gallery-item').magnificPopup({
type: 'image',
gallery:{
enabled:true
}
});
// MixItUp 2
$('#container').mixItUp();
});
</script>
<div class="wrapper">
{{>sidebar}}
<div class="main-panel">
{{>navbar}}
<div class="content">
<div class="form-group">
<label>Photos</label>
<input type="file" multiple id="accfile" class="form-control">
</div>
<div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mixitup/2.1.11/jquery.mixitup.min.js"></script>
<div class="container">
<div id="container" class="row">
{{#each imagesacc}}
<div class="col-md-4 mix category-a">
<div class="single-portfolio">
<div class="uploadedImage">
<!--<a class="gallery-item" href="{{this.url}}">-->
<img class="img-responsive" src="{{this.url}}" alt="One" />
<!--</a>-->
</div>
</div>
</div>
{{/each}}
</div>
</div>
</div>
{{>footer}}
</div>
</div>
The thing is that this is working, but the problem is that the images I add are not linked to a specific document, I want for example, when looking at an accommodation, I want to see only the images of that hotel ! 问题是这可以正常工作,但问题是我添加的图像未链接到特定文档,例如,当我查看住宿时,我只想查看该酒店的图像!
Thanks for helping ! 感谢您的帮助!
The _id
of the inserted file is returned in the callback from the insert function. 插入文件的
_id
在insert函数的回调中返回。 Where you now have: 您现在拥有的位置:
FS.Utility.eachFile(event, function(file) {
ImagesAcc.insert(file, function (err, fileObj) {
//Inserted new doc with ID fileObj._id, and kicked off the data upload using HTTP
});
});
you need to have some actual code in the callback to save the image's _id
to another collection as a reference. 您需要在回调中包含一些实际代码,以将图像的
_id
保存到另一个集合中作为参考。
For example, if your uploaded is running with the data context of an individual accommodation (so that this
points to your current AccommodationList
object), you can directly update that as follows: 例如,如果您上传的与单独住宿的数据上下文中运行(这样,
this
指向当前的AccommodationList
对象)时,你可以直接更新如下:
FS.Utility.eachFile(event, function(file) {
ImagesAcc.insert(file, function (err, fileObj) {
if (!err) {
console.log('The _id of the inserted Image is: '+fileObj._id);
console.log('The _id of the current AccommodationList object is: '+this._id);
AccommodationList.update(this._id,{ $set: { imageId: fileObj._id }});
}
});
});
The console.log()
statements are only there for you to verify how this is working. console.log()
语句仅在此处供您验证其工作方式。 This pattern assumes that there's only one image for each accommodation. 此模式假设每个住宿只有一张图片。 To find that one image given the
_id
aclistId of the parent AccommodationList
object: 要查找给定父父
AccommodationList
对象的_id
aclistId的图像,请执行以下操作:
const imageId = AccommodationList.findOne(aclistId).imageId;
const image = ImagesAcc.findOne(imageId);
If you have a set of images then you can use $push
instead: 如果您有一组图像,则可以使用
$push
代替:
AccommodationList.update(this._id,{ $push: { imageIds: fileObj._id }});
Then you have to find all matching images with $in:
: 然后,您必须找到所有与
$in:
匹配的图像:
const imageIds = AccommodationList.findOne(aclistId).imageIds;
const images = ImagesAcc.findOne({ _id: { $in: imageIds }});
Bonne chance! 机会良多!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.