【问题标题】:MeteorJS AutoForm.Hooks not updating docMeteorJS AutoForm.Hooks 不更新文档
【发布时间】:2015-12-25 05:17:48
【问题描述】:

我正在为 MeteorJS 使用很棒的 aldeed:autoform 包。我有一个自定义表单,可以让我创建数据库条目。

用户输入的表单字段之一是针对 Suburb 的,我正在使用 sergeyt:typeahead 包在用户键入时对此提出建议。

建议采用用户熟悉的格式(本质上是“郊区、州、邮政编码”)。我称之为长城。

然后,我使用钩子前的 AutoForm 从用户选择/输入的 longsuburb 值中分离出 Zipcode(“邮政编码”)值和“suburb”值。然后钩子在提交之前将郊区和邮政编码值插入到文档中。

这一切都很好。

现在我想创建一个编辑表单,用户可以在其中编辑详细信息(我计划对两者使用相同的表单,但对我来说这是一个步骤,因为我是新手)。

我已经设置了一个编辑表单模板,并根据 AutoForm 示例将类型设置为“更新”。

我可以成功编辑所有表单详细信息并将它们保存到集合中,但我的 AutoForm 挂钩似乎根本没有被调用,因此文档的“郊区”和“邮政编码”值保持不变提交时。

我尝试了几种不同的方法,但主要是在黑暗中拍摄,所以任何建议都会很棒。

这是编辑表单模板

    <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 等并将它们保存到数据库中。只是文档插入不起作用。

【问题讨论】:

  • 我已将 JS 中的 Hook 从“插入”更新为“更新”,但在浏览器控制台中出现以下错误:[Error] TypeError: undefined is not an object (evaluating 'suburbString.substring')

标签: meteor hook meteor-autoform


【解决方案1】:

谢谢@约翰尼。 几乎成功了,但在你的帮助下,我能够解决它。

基本上我有两个问题。正如您所指出的,我确实需要使用 doc.$set.key 来更新邮政编码和郊区值。但我还需要使用 AutoForm.getFieldValue 回调定义郊区字符串变量。

所以完整的解决方案如下:

  //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
          }
        }
    });

【讨论】:

    【解决方案2】:

    看起来doc.longsuburb 未定义。我以前也有过类似的问题。你可以尝试从this.currentDoc.longsuburb获取longsuburb值

    根据文档: https://github.com/aldeed/meteor-autoform#callbackshooks

    以下属性和函数在所有提交中都可用 调用它们时的钩子。这不包括 formToDoc, formToModifier 或 docToForm。

    ...

    this.currentDoc:附加的当前文档 到表单(来自 doc 属性)

    所以在你的 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 - 更改会返回以下控制台错误:Error: When the modifier option is true, all validation object keys must be operators. Did you forget $set?
    • answer之后,我更新了答案以使用 $set 更新邮政编码和郊区
    • 经过大量搜索,我偶然发现了这个问题。虽然这已经过时了,但我想知道是否有办法使用上述方法取消设置对象?
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-05-24
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多