MeteorJS AutoForm.Hooks 没有更新文档
MeteorJS AutoForm.Hooks not updating doc
我正在为 MeteorJS 使用很棒的 aldeed:autoform 包。我有一个自定义表单,可以让我创建数据库条目。
用户输入的表单字段之一是郊区,我正在使用 sergeyt:typeahead 包在用户输入时就此提出建议。
建议采用用户熟悉的格式(本质上是 "suburb, STATE, zipcode")。我称之为 longsuburb。
然后我使用 AutoForm before hook 从用户 selected/entered longsuburb 值中分离出邮政编码 ("postcode") 值和 "suburb" 值。挂钩然后在提交文档之前将郊区和邮政编码值插入到文档中。
一切都很好。
现在我想创建一个编辑表单,用户可以在其中编辑详细信息(接下来我计划对两者使用相同的表单,但对我来说一次一步,因为我是新手) .
我已根据 AutoForm 示例设置了一个编辑表单模板并将类型设置为 "update"。
我可以成功编辑所有表单详细信息并将它们保存到集合中,除了我的 AutoForm 挂钩似乎根本没有被调用所以 "suburb" 和 "postcode" 值文档在提交时保持不变。
我尝试了几种不同的方法,但主要是在黑暗中拍摄,所以任何建议都很好。
这是编辑表单模板
<template name="editBar">
{{#autoForm collection="Bars" id="editBarsForm" template="bootstrap3-horizontal" label-class="col-sm-3" input-col-class="col-sm-9" type="update" doc=this}}
<fieldset>
<legend>Edit Bar</legend>
{{> afQuickField name='bar_name' placeholder="Name of the Bar, Pub, Venue" class="form-control typeahead" }}
{{> afQuickField name='image' class="form-control typeahead" }}
{{> afQuickField name='url' placeholder="Venue's Website" class="form-control typeahead" }}
{{> afQuickField name='longsuburb' placeholder="Suburb" class="form-control typeahead" autocomplete="off" spellcheck="off" data-source="getSuburbs"}}
{{> afQuickField name='barType' options=bartypes class="selectpicker"}}
</fieldset>
<button type="submit" class="btn btn-primary submit">Submit</button>
<a class="btn btn-danger delete" href="#">Delete post</a>
<a class="btn btn-default cancel" href="#">Cancel</a>
{{/autoForm}}
</template>
这是我在编辑表单 JS 文件中的内容
Template.editBar.helpers({
getSuburbs: function() {
return AuPostcodes.find().fetch().map(function(it){ return it.longsuburb; });
console.log('it');
},
bartypes: function() {
return [
{label: "Select", value: ""},
{label: "Bar", value: "bar"},
{label: "Pub", value: "pub"}
];
}
});
Template.editBar.rendered = function(){
Meteor.typeahead.inject();
};
//Split out suburb and postcide from form's longsuburb string and submit with doc to Bars collection.
//"suburb" currently used for filtering.
AutoForm.hooks({
editBarsForm: {
before:{
insert: function(doc) {
var suburbString = doc.longsuburb;
var postcode = suburbString.substring(suburbString.lastIndexOf(",")+2,suburbString.length);
var suburb = suburbString.substring(0,suburbString.indexOf(","));
doc.postcode = postcode;
doc.suburb = suburb;
return doc; //autoFrom magic commence
}
}
}
});
Template.editBar.events({
'click .delete': function(e) {
e.preventDefault();
if (confirm("Delete this bar?")) {
var currentBarId = this._id;
Bars.remove(currentBarId);
Router.go('barsList');
}
},
'click .cancel': function(e) {
e.preventDefault();
Router.go('barsList');
}
});
添加模板和代码基本相同。正如我所说,一切都适用于创建记录。我还可以编辑名称、url、longsuburb 等并将它们保存到数据库中。只是文档插入不起作用。
看起来 doc.longsuburb
未定义。我以前有过类似的问题。您可以尝试从 this.currentDoc.longsuburb
获取 longsuburb 值
根据文档:
https://github.com/aldeed/meteor-autoform#callbackshooks
The following properties and functions are available in all submission
hooks when they are called. This does not include formToDoc,
formToModifier, or docToForm.
...
this.currentDoc: The current document attached
to the form (from doc attribute)
因此在您的 Edit Form JS 文件中,它应该如下所示:
//Split out suburb and postcide from form's longsuburb string and submit with doc to Bars collection.
//"suburb" currently used for filtering.
AutoForm.hooks({
editBarsForm: {
before:{
update: function(doc) {
var suburbString = this.currentDoc.longsuburb;
var postcode = suburbString.substring(suburbString.lastIndexOf(",")+2,suburbString.length);
var suburb = suburbString.substring(0,suburbString.indexOf(","));
doc.$set.postcode = postcode;
doc.$set.suburb = suburb;
return doc; //autoFrom magic commence
}
}
}
});
谢谢@Johnny。 almost 成功了,但在您的帮助下我得以解决。
基本上我有两个问题。正如您所指出的,我确实需要使用 doc.$set.key 来更新邮政编码和郊区值。但我还需要使用 AutoForm.getFieldValue 回调定义 suburbString 变量。
所以完整的解决方案如下所示:
//Split out suburb and postcode from form's long suburb sting and submit with doc to Bars collection.
//"suburb" currently used for filtering.
AutoForm.hooks({
editBarsForm: {
before:{
update: function(doc) {
var suburbString = AutoForm.getFieldValue("longsuburb");
var postcode = suburbString.substring(suburbString.lastIndexOf(",")+2,suburbString.length);
var suburb = suburbString.substring(0,suburbString.indexOf(","));
doc.$set.postcode = postcode;
doc.$set.suburb = suburb;
return doc; //autoForm magic commence
}
}
});
我正在为 MeteorJS 使用很棒的 aldeed:autoform 包。我有一个自定义表单,可以让我创建数据库条目。
用户输入的表单字段之一是郊区,我正在使用 sergeyt:typeahead 包在用户输入时就此提出建议。
建议采用用户熟悉的格式(本质上是 "suburb, STATE, zipcode")。我称之为 longsuburb。
然后我使用 AutoForm before hook 从用户 selected/entered longsuburb 值中分离出邮政编码 ("postcode") 值和 "suburb" 值。挂钩然后在提交文档之前将郊区和邮政编码值插入到文档中。
一切都很好。
现在我想创建一个编辑表单,用户可以在其中编辑详细信息(接下来我计划对两者使用相同的表单,但对我来说一次一步,因为我是新手) .
我已根据 AutoForm 示例设置了一个编辑表单模板并将类型设置为 "update"。
我可以成功编辑所有表单详细信息并将它们保存到集合中,除了我的 AutoForm 挂钩似乎根本没有被调用所以 "suburb" 和 "postcode" 值文档在提交时保持不变。
我尝试了几种不同的方法,但主要是在黑暗中拍摄,所以任何建议都很好。
这是编辑表单模板
<template name="editBar">
{{#autoForm collection="Bars" id="editBarsForm" template="bootstrap3-horizontal" label-class="col-sm-3" input-col-class="col-sm-9" type="update" doc=this}}
<fieldset>
<legend>Edit Bar</legend>
{{> afQuickField name='bar_name' placeholder="Name of the Bar, Pub, Venue" class="form-control typeahead" }}
{{> afQuickField name='image' class="form-control typeahead" }}
{{> afQuickField name='url' placeholder="Venue's Website" class="form-control typeahead" }}
{{> afQuickField name='longsuburb' placeholder="Suburb" class="form-control typeahead" autocomplete="off" spellcheck="off" data-source="getSuburbs"}}
{{> afQuickField name='barType' options=bartypes class="selectpicker"}}
</fieldset>
<button type="submit" class="btn btn-primary submit">Submit</button>
<a class="btn btn-danger delete" href="#">Delete post</a>
<a class="btn btn-default cancel" href="#">Cancel</a>
{{/autoForm}}
</template>
这是我在编辑表单 JS 文件中的内容
Template.editBar.helpers({
getSuburbs: function() {
return AuPostcodes.find().fetch().map(function(it){ return it.longsuburb; });
console.log('it');
},
bartypes: function() {
return [
{label: "Select", value: ""},
{label: "Bar", value: "bar"},
{label: "Pub", value: "pub"}
];
}
});
Template.editBar.rendered = function(){
Meteor.typeahead.inject();
};
//Split out suburb and postcide from form's longsuburb string and submit with doc to Bars collection.
//"suburb" currently used for filtering.
AutoForm.hooks({
editBarsForm: {
before:{
insert: function(doc) {
var suburbString = doc.longsuburb;
var postcode = suburbString.substring(suburbString.lastIndexOf(",")+2,suburbString.length);
var suburb = suburbString.substring(0,suburbString.indexOf(","));
doc.postcode = postcode;
doc.suburb = suburb;
return doc; //autoFrom magic commence
}
}
}
});
Template.editBar.events({
'click .delete': function(e) {
e.preventDefault();
if (confirm("Delete this bar?")) {
var currentBarId = this._id;
Bars.remove(currentBarId);
Router.go('barsList');
}
},
'click .cancel': function(e) {
e.preventDefault();
Router.go('barsList');
}
});
添加模板和代码基本相同。正如我所说,一切都适用于创建记录。我还可以编辑名称、url、longsuburb 等并将它们保存到数据库中。只是文档插入不起作用。
看起来 doc.longsuburb
未定义。我以前有过类似的问题。您可以尝试从 this.currentDoc.longsuburb
根据文档: https://github.com/aldeed/meteor-autoform#callbackshooks
The following properties and functions are available in all submission hooks when they are called. This does not include formToDoc, formToModifier, or docToForm.
...
this.currentDoc: The current document attached to the form (from doc attribute)
因此在您的 Edit Form JS 文件中,它应该如下所示:
//Split out suburb and postcide from form's longsuburb string and submit with doc to Bars collection.
//"suburb" currently used for filtering.
AutoForm.hooks({
editBarsForm: {
before:{
update: function(doc) {
var suburbString = this.currentDoc.longsuburb;
var postcode = suburbString.substring(suburbString.lastIndexOf(",")+2,suburbString.length);
var suburb = suburbString.substring(0,suburbString.indexOf(","));
doc.$set.postcode = postcode;
doc.$set.suburb = suburb;
return doc; //autoFrom magic commence
}
}
}
});
谢谢@Johnny。 almost 成功了,但在您的帮助下我得以解决。
基本上我有两个问题。正如您所指出的,我确实需要使用 doc.$set.key 来更新邮政编码和郊区值。但我还需要使用 AutoForm.getFieldValue 回调定义 suburbString 变量。
所以完整的解决方案如下所示:
//Split out suburb and postcode from form's long suburb sting and submit with doc to Bars collection.
//"suburb" currently used for filtering.
AutoForm.hooks({
editBarsForm: {
before:{
update: function(doc) {
var suburbString = AutoForm.getFieldValue("longsuburb");
var postcode = suburbString.substring(suburbString.lastIndexOf(",")+2,suburbString.length);
var suburb = suburbString.substring(0,suburbString.indexOf(","));
doc.$set.postcode = postcode;
doc.$set.suburb = suburb;
return doc; //autoForm magic commence
}
}
});