Question

我是Meteor和Javascript的新手。我慢慢想出了如何设置一个模式表单，当我点击一个按钮时它会出现，并且可以捕获我的表单数据并在单击提交时关闭表单。我被困的地方是每当我点击按钮添加更多数据时，之前的值仍然是模态形式。我已经尝试了大多数其他答案和我发现的例子，但我似乎无法弄清楚我需要做些什么来明确这些值。任何建议，将不胜感激。这是我目前的情况：

模态模板

<template name="addButton">
  <div class="modal fade" id="addButton">
  <form>
    <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Add Button</h4>
      </div>
      <div class="modal-body">
        <form role="form">
            <div class="form-group">
                <label for="buttonOrder">Button Order</label>
                <input type="text" class="form-control" name="buttonOrder">
            </div>
            <div class="form-group">
                <label for="buttonName">Button Name</label>
                <input type="text" class="form-control" name="buttonName">
            </div>
            <div class="form-group">
                <label for="buttonDescription">Button Description</label>
                <input type="text" class="form-control" name="buttonDescription">
            </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
        <input type="submit" value="Submit" class="btn btn-primary"/>
      </div>
    </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </form>
  </div>
</template>

Modal JS Helper

Template.addButton.events({
    'submit form': function(e) {
        e.preventDefault();

        var button = {
            buttonOrder: $(e.target).find('[name=buttonOrder]').val(),
            buttonName: $(e.target).find('[name=buttonName]').val(),
            buttonDescription: $(e.target).find('[name=buttonDescription]').val()
        }
        button._id = Buttons.insert(button);

        $('#addButton').modal('hide');
        $(this).removeData('#addButton.modal');
    }
})

@杰里米-S

我无法得到你的建议，虽然Session密钥建议给了我一个解决方案，它可以用于Bootstrap 2而不是Bootstrap 3.我终于得到了Bootstrap 3的功能，尽管我怀疑这是最优雅的解决方案。我在元素中添加了id，只是将每个元素的值设置为null，如下所示：

$('#addButton').modal('hide')  
$('#buttonOrder').val(null);  
$('#buttonName').val(null);  
$('#buttonDescription').val(null);

现在我只需要弄清楚为什么我无法使用Session键和Bootstrap 3。

Answer 1

一种可能的方法是使用Meteor's findAll在模板中查找输入，然后遍历它们并将每个输入的值设置为null。 findAll是一个jquery选择器，但这里仅限于模板的上下文。

Template.addButton.events({
  'submit form': function(e) {
    e.preventDefault();

    var button = {
      buttonOrder: $(e.target).find('[name=buttonOrder]').val(),
      buttonName: $(e.target).find('[name=buttonName]').val(),
      buttonDescription: $(e.target).find('[name=buttonDescription]').val()
    }

    button._id = Buttons.insert(button);

    _.each(
      this.findAll("input"),
      function(element){element.value = null}
    );

    $('#addButton').modal('hide');
  }
})

另请注意，Meteor不是使用jquery来显示和隐藏模态，而是基于像Session键这样的反应源，从DOM中完全添加和删除它。我会查看Meteor的reactivity summary以获取有关如何执行此操作的其他指导。

如何在提交后清除模态值

1 个答案: