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

Posted 2023-03-08

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

【英文标题】：meteor - how to code a bootstrap modal template to re-render html input values even if the user has typed in them

【发布时间】：2020-06-07 15:11:42

【问题描述】：

我正在使用 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');

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

【问题讨论】：

能否请您减少文本并添加一些代码示例？如有必要，您可以使用 blaze 模板添加 html cmets。否则真的很难看出你真正的目标是什么，以及你已经做了什么来实现目标。

这似乎与previously closed bug 有关，但它似乎没有得到解决。关于如何解决此错误的任何建议？

【参考方案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');
            
        
  );
;