Javascript 使用IronRouter/MeteorJS以引导模式提交表单

我正在尝试将一个新的开胃菜提交给我正在创建的一个类似于烹饪书的web应用程序。布局有一个恒定的标题/nav，允许用户添加一个新的开胃菜，它触发一个模态和一个包含开胃菜名称、描述和照片的表单。我希望模态在提交后关闭，并保留在触发模态的当前页面上。目前，我的提交表单不起作用，我不确定问题出在哪里

指向当前部署版本的链接为：

我的路由器：

// lib/router.js

Router.configure({
    layoutTemplate: 'layout'
});

Router.map(function() {
    this.route('allRecipes', {
        path: '/'
    });

    this.route('appetizers', {
        path: '/appetizers'
    });

    this.route('appetizerPage', {
        path: '/appetizers/:_id',
        data: function() { return Appetizers.findOne(this.params._id); }
    });

    this.route('desserts', {
        path: '/desserts'
    });

    this.route('mainCourses', {
        path: '/maincourses'
    });

    this.route('submit', {
        path: '/appetizerSubmit'
    });
});

我的开胃菜html表单：

// client/views/forms/appetizerForm.html

<template name="appetizerForm">
    <!-- This is the appetizer modal -->
    <div class="modal fade" id="myAppModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Add An Appetizer</h4>
          </div>
          <div class="modal-body">
              <!-- This is the appetizer form -->
              <form>
                  <div class="form-group">
                      <label for="inputNewLabel">Name</label>
                      <input type="text" class="form-control" id="addNewAppetizer" name="appName" placeholder="What is the name of this appetizer?">
                  </div>
                  <div class="form-group">
                      <label for="inputNewLabel">Description</label>
                      <input type="text" class="form-control" id="addNewAppDesc" name="appDesc" placeholder="Share details about your appetizer.">
                  </div>
                  <div class="form-group">
                      <label for="inputNewLabel">Add Photo</label>
                      <input type="file" id="addNewAppPic" name="appPic">
                      <p class="help-block">Upload a photo of your appetizer.</p>
                  </div>
              </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="submit" class="btn btn-primary" value="submitApp">Submit Appetizer</button>
          </div>
        </div>

---

您的事件映射语法错误，它必须是

eventType cssSelector

Template.appetizerForm.events({
  "submit form": function(event, template) {
    event.preventDefault();
    [...]
    template.$(".modal").modal("hide");
  }
});

---

如果您希望在提交表单时关闭模式，请使用jQuery插件语法调用模式上的隐藏方法。

我不熟悉meteor，因此不了解它是如何连接事件的-submitap只是一个按钮值，通常您会在表单本身上添加一个事件侦听器。为了便于访问，我建议您将按钮放在表单中，以便enter键可用于提交etc@DominicTobias啊!！抢手货非常感谢。这有助于解决一个难题。。。模式现在在提交时清除，但数据仍然没有正确注入。最好监听表单元素本身，以便捕获返回键提交

Template.appetizerForm.events({
  "submit form": function(event, template) {
    event.preventDefault();
    [...]
    template.$(".modal").modal("hide");
  }
});