Как правильно установить отмеченный флажок атрибут из реактивного источника данных при рендере

У меня есть несколько флажков, чьи проверенные атрибуты представляют логические значения в коллекции. Мой код правильно отслеживает событие нажатия на флажки и обновляет значения в коллекции. Однако при первой загрузке страницы и при переходе пользователя со страницы проверенный атрибут не устанавливается должным образом, несмотря на правильность значений сеанса и коллекции.

HTML

<input type="checkbox" id="feedEmailSubscribe" checked={{isChecked}}>

Помощник JS

Template.layout.isChecked = function () {
  var id = $this.id;
  return Session.get(id) ? "checked" : "";
};

Сначала я опускаю коллекцию и устанавливаю переменную сеанса для флажка через маршрут invites.

// invites
  this.route('invites', {
    path: ':_id/invited-guest/VIP',
    waitOn : function () {
      return Meteor.subscribe('guests', this.params._id);
    },
    data: function () {
      Session.set('guestId', this.params._id)
      return Guests.findOne({_id: this.params._id});
    },
    action : function () {
      var q = Guests.findOne({_id: this.params._id});
      if (this.ready()) {
        Session.set('guestName', q.name);
        Session.set('feedEmailSubscribe', q.feedEmailSubscribe);
        //...I then redirect the user
      }
    },
  });

Я могу проверить, что сеансы установлены. Вот что у меня есть для настройки маршрута (там, где есть флажок)

// settings page
  this.route('settings', {
    path: '/settings',
    waitOn : function () {
      return Meteor.subscribe('guests', Session.get('guestId'));
    },
    data: function () {
      return Guests.findOne({_id: Session.get('guestId')});
    },
    action: function () {
    if (this.ready())
        this.render();
    },
    onAfterAction: function() {
      setPageTitle('Settings');
    }
  });

Я могу убедиться, что сессия существует и что она правильно изменяется после нажатия на страницу после рендеринга. Я подозреваю, что я либо неправильно использую Blaze, как кратко описано в вики Blaze, либо у меня что-то не так в настройке своего железного маршрутизатора?

Заранее спасибо за помощь!

Источник

3 ответа

В помощнике твоя линия

  return Session.get(id) ? "checked" : "";

следует изменить на

  return Session.get(id) ? "checked" : false;

Это потому, что пустая строка генерирует пустой атрибут html checked="", Пустой логический атрибут представляет истинное значение в соответствии со спецификацией HTML. Вы должны опустить атрибут, чтобы иметь ложное значение, это может быть достигнуто путем возврата false, null или же undefinedСогласно документации Метеора, как упоминал Божао.

Не удивляйтесь, потому что полученный код не отображается как атрибут. Blaze использует element.checked Атрибут JavaScript, а не checked Атрибут HTML, чтобы фактически установить проверяемость. Атрибут HTML указывает только значение по умолчанию и не имеет значения, если пользователь или код JS изменили проверяемость. Blaze относится к таким специально input value, input checked, textarea value а также option selected атрибутов.

Источник

Нашел потенциальное решение: после рендеринга я зацикливаю все флажки и применяю "флажок" в соответствии с тем, как установлена ​​соответствующая переменная сеанса. Хотя не все так элегантно.

settings.js

Template.settings.rendered = function () {
  $(":checkbox").each(function(){
    console.log(this.id);
    if (Session.get(this.id, true)) {
      $(this).prop("checked", true);
    }
   });
};
Источник

Ваши помощники выглядят хорошо для меня, однако я бы вернул false, поскольку они задокументированы здесь:

https://github.com/meteor/meteor/wiki/Using-Blaze

Источник
Другие вопросы по тегам