流星 - 如何编写引导模式模板以重新呈现 html 输入值，即使用户已输入它们

Question

我正在使用 Iron 路由器将数据传递给引导模式模板。 modal 包含一个包含许多文本输入的 html 表单。模态被重新用于 3 个不同的功能。我使用 Session 变量来跟踪正在使用的模式类型。类型 0 = 空白表格，类型 1 = 部分编辑，类型 2 = 完整编辑。对于所有类型，表单本身在视觉上保持相同。唯一改变的是哪些输入框包含一个值。

对于类型 1 的编辑，只有 2 个框会包含值。对于类型 2 编辑，所有框都将包含值。类型 0 将是空框。

// routes.js
Router.route('/mypage', function () {
    var mtype = Session.get("mtype");

    this.layout('myLayout');
    this.render('my_popup', {to:'my_popup', data: function() {
        switch (mtype) {
            case 1:
                return {box1:'box 1 text', box2:'box 2 text', box3:''};
            case 2:
                return {box1:'box 1 text', box2:'box 2 text', box3:'box 3 value'};
            default:
                return {box1:'', box2:'', box3:''};
        }
    }});
});

// main.html
<template name="myLayout">
  {{> yield "my_popup"}}
</template>

<template name="my_popup">
  <div class="modal fade" id="my_popup">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <div class="modal-title label label-primary">Title</div>
        </div>
        <div class="modal-body">
          <form class="js-form-submit" id="my_form" name="my_form">
            <div class="form-group">
              <input class="form-control" type="text" name="box1" maxlength="64" placeholder="something" value="{{box1}}"/>
            </div>
            <div class="form-group">
              <input class="form-control" type="text" name="box2" maxlength="64" placeholder="something" value="{{box2}}"/>
            </div>
            <div class="form-group">
              <input class="form-control" type="text" name="box3" maxlength="64" placeholder="something" value="{{box3}}"/>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button class="js-form-ok btn btn-success btn-sm">submit</button>
          <button class="btn btn-warning btn-sm" data-dismiss="modal">cancel</button>
        </div>
      </div>
    </div>
  </div>
</template>

最初我尝试将一个对象传递给仅包含将要显示的属性的模态模板。这并没有覆盖现有的输入值，因此我必须对每种模式类型使用相同的对象，并对未使用的属性使用空字符串。在显示模式之前，我尝试在表单上调用 reset() 方法。在这种情况下，它会导致整个模板停止重新渲染。

在显示模态之前，我将会话变量设置为将要显示的模态类型。 Session.set('mtype', 1); 这会触发 Iron Router 向模板发送正确的数据，未使用的属性会被清除，并且模板会成功重新渲染。

不幸的是，如果我输入其中一个 html 输入，模板在重新渲染时不会重置其值。这似乎与我在 reset() 方法中遇到的相同问题有关。如果输入包含自定义文本（键入值），则当 Session 变量更改时，模式不会显示发送到模板的新数据。它保留用户输入的文本。

在流星中重用引导模式形式的最佳方法是什么？我应该使用助手而不是铁路由器来获取数据对象吗？有点像...

{{#with getData}}

为什么会保留用户输入的文本？

我也尝试过使用 defaultValue 属性而不是 value。两个属性都会出现同样的问题。

---

测试错误：

• 打开网络控制台
• Session.set('mtype',1);
• $('#my_popup').modal('show');
• 在第三个文本框中输入一些内容
• 点击关闭模式将其隐藏
• Session.set('mtype',0);
• $('#my_popup').modal('show');

您会看到尽管已向每个框发送了空字符串，但您键入的值仍然可见。

另一种方式：

• Session.set('mtype',2);
• $('#my_form')[0].reset();
• Session.set('mtype',1);
• $('#my_popup').modal('show');

您会看到，尽管已向每个框发送了新的文本字符串，但没有一个框包含值。

Answer 1

我找到的唯一解决方案是在模板中使用 defaultValue，然后在显示模式之前遍历表单字段并设置 value = defaultValue。

<input class="form-control" type="text" name="box1" maxlength="64" placeholder="something" defaultValue="{{box1}}"/>

Template.my_popup.rendered = function() {
  $("#my_popup").on('show.bs.modal', function() {
        var elems = $('#my_form')[0].elements;
        for (var i=0; i<elems.length; i++) {
            if (elems[i].hasAttribute('defaultValue')) {
                elems[i].value = elems[i].getAttribute('defaultValue');
            }
        }
  });
};