流星,如何在模板事件函数中设置上下文数据
Meteor, how to set context data in template event function
我想在将新上传的照片插入图像 FScollection 的事件处理程序中设置上下文数据。我要设置的是新生成的照片文件的id。我需要将此 ID 传递给子模板以进行进一步处理。下面是我正在使用的代码:
我应该如何定义稍后要在事件处理程序中使用的数据?
images.js
Template.Profile.events({
'change #uploadBtn': function(event, template) {
var name = $("#uploadBtn").val();
$("#uploadFile").val(name);
FS.Utility.eachFile(event, function(file) {
Images.insert(file, function (err, fileObj) {
if (err){
// handle error
}
else {
//here I want to set fileObj._id as data for further usage.
}
});
});
}
});
Template.imageView.helpers({
images: function () {
return Images.findOne({_id: this.imageId});
}
});
Template.imageView.events({
'click #deleteBtn': function (event) {
this.remove();
}
});
模板文件
images.html
<template name="Profile">
<input id="uploadFile" placeholder="Choose File" disabled="disabled" style="cursor: auto; background-color: rgb(235, 235, 228); "/>
<div class="fileUpload btn btn-primary">
<span>Upload</span>
<input id="uploadBtn" type="file" name="…" class="upload">
</div>
{{> imageView}}
</template>
<template name="imageView">
<div class="imageView">
{{#if images}}
<div style="width: 120px;height: 120px;margin-bottom: 30px;">
<div style="float: middle;">
{{#with images}}
<button id="deleteBtn" type="button" class="btn btn-primary" >Delete</button>
{{/with}}
</div>
<a href="{{images.url}}" target="_blank" >
<img src="{{images.url}}" alt="" class="thumbnail" style="width: 96px; height: 96px;"/>
</a>
</div>
{{/if}}
</div>
</template>
你有几个选择。
- 在引用它的对象中包含图像的 _id
- 在图像本身中包含对象的 _id 作为 parentId 或类似的
对于第一种情况,在 Image.insert
的回调中使用图像的 _id,然后对父对象(这可能是用户吗?)执行 .update()
以包含引用到图像。如果您允许使用多个图像,那么您可能希望使用这些 _id 更新数组。
在第二种情况下,您可以使用您需要的 parentId 更新刚刚在回调中插入的对象。
然后您只需要在查询相关图像时包含适当的子句,由于反应性,它会自动更新。
我想在将新上传的照片插入图像 FScollection 的事件处理程序中设置上下文数据。我要设置的是新生成的照片文件的id。我需要将此 ID 传递给子模板以进行进一步处理。下面是我正在使用的代码:
我应该如何定义稍后要在事件处理程序中使用的数据?
images.js
Template.Profile.events({
'change #uploadBtn': function(event, template) {
var name = $("#uploadBtn").val();
$("#uploadFile").val(name);
FS.Utility.eachFile(event, function(file) {
Images.insert(file, function (err, fileObj) {
if (err){
// handle error
}
else {
//here I want to set fileObj._id as data for further usage.
}
});
});
}
});
Template.imageView.helpers({
images: function () {
return Images.findOne({_id: this.imageId});
}
});
Template.imageView.events({
'click #deleteBtn': function (event) {
this.remove();
}
});
模板文件
images.html
<template name="Profile">
<input id="uploadFile" placeholder="Choose File" disabled="disabled" style="cursor: auto; background-color: rgb(235, 235, 228); "/>
<div class="fileUpload btn btn-primary">
<span>Upload</span>
<input id="uploadBtn" type="file" name="…" class="upload">
</div>
{{> imageView}}
</template>
<template name="imageView">
<div class="imageView">
{{#if images}}
<div style="width: 120px;height: 120px;margin-bottom: 30px;">
<div style="float: middle;">
{{#with images}}
<button id="deleteBtn" type="button" class="btn btn-primary" >Delete</button>
{{/with}}
</div>
<a href="{{images.url}}" target="_blank" >
<img src="{{images.url}}" alt="" class="thumbnail" style="width: 96px; height: 96px;"/>
</a>
</div>
{{/if}}
</div>
</template>
你有几个选择。
- 在引用它的对象中包含图像的 _id
- 在图像本身中包含对象的 _id 作为 parentId 或类似的
对于第一种情况,在 Image.insert
的回调中使用图像的 _id,然后对父对象(这可能是用户吗?)执行 .update()
以包含引用到图像。如果您允许使用多个图像,那么您可能希望使用这些 _id 更新数组。
在第二种情况下,您可以使用您需要的 parentId 更新刚刚在回调中插入的对象。
然后您只需要在查询相关图像时包含适当的子句,由于反应性,它会自动更新。