метеор - как кодировать модальный шаблон bootstrap для повторного рендеринга html входных значений, даже если пользователь их набрал - PullRequest
Новая
       32

метеор - как кодировать модальный шаблон bootstrap для повторного рендеринга html входных значений, даже если пользователь их набрал

0 голосов
/ 24 февраля 2020

Я использую железный маршрутизатор для передачи данных в bootstrap модальный шаблон. Модал содержит форму 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); Это заставляет железный маршрутизатор отправлять правильные данные в шаблон, неиспользуемые свойства очищаются, и шаблон успешно перерисовывается.

К сожалению, если я введу один из html входов, шаблон не будет сбросьте его значение при повторном рендеринге. Похоже, это связано с той же проблемой, с которой я столкнулся при использовании метода reset (). Если входные данные содержат пользовательский текст (значение набрано), то модальное окно не отображает новые данные, отправленные в шаблон при изменении переменной Session. Сохраняет введенный пользователем текст.

Какой лучший способ повторно использовать модальную форму bootstrap в метеоре? Должен ли я использовать помощник вместо железного маршрутизатора, чтобы получить объект данных? Что-то вроде ...

{{#with getData}}

Почему вводимый пользователем текст сохраняется?

Я также пытался использовать атрибут defaultValue вместо значения. Та же проблема возникает с обоими атрибутами.

Чтобы проверить ошибку:

  • откройте веб-консоль
  • Session.set('mtype',1);
  • $('#my_popup').modal('show');
  • введите что-нибудь в 3-е текстовое поле
  • щелкните модал, чтобы скрыть его
  • Session.set('mtype',0);
  • $('#my_popup').modal('show');

Вы увидите, что введенное вами значение по-прежнему видно, несмотря на то, что в каждое поле были отправлены пустые строки.

Другой способ:

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

Вы увидите, что ни один из блоков не содержит значений, несмотря на отправку новых строк текста в каждую клеточку.

1 Ответ

0 голосов
/ 27 февраля 2020

Единственное решение, которое я нашел, состоит в том, чтобы использовать defaultValue в шаблоне, а затем l oop через поля формы перед отображением модального значения и установить значение = 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');
            }
        }
  });
};
...