Question

我有多个复选框，其checked属性表示集合中的布尔值。我的代码正确跟踪复选框上的click事件并更新集合中的值。但是，当页面首次加载时，以及当用户离开页面时，尽管会话和集合值正确，但未正确设置checked属性。

html

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

Helper JS

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

我首先下拉集合并通过“邀请”设置复选框的会话变量。路线

// 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 wiki中简要讨论的那样，或者我的铁路由器设置有问题？

提前感谢您的帮助！

Answer 1

在助手中，你的行

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

应改为

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

这是因为空字符串会生成空的html属性checked=""。一个空的布尔属性represents a true value according to HTML spec。您必须省略该属性才能获得错误值，这可以通过返回false，null或undefined来实现，根据Bozhao提到的Meteor文档。

不要感到惊讶，因为生成的代码不会显示为属性。 Blaze使用element.checked JavaScript属性而不是checked HTML属性来实际设置检查。 HTML属性only specifies the default value，一旦the user或a JS code更改了检查，就没有任何意义。 Blaze treats such specially input value，input checked，textarea value和option selected属性。

Answer 2

找到一个潜在的解决方案：在渲染时，我遍历所有复选框并根据相应会话变量的设置方式应用“已检查”。虽然感觉不那么优雅。

settings.js

Template.settings.rendered = function () {
  $(":checkbox").each(function(){
    console.log(this.id);
    if (Session.get(this.id, true)) {
      $(this).prop("checked", true);
    }
   });
};

Answer 3

你的助手看起来对我很好，但是，我会在这里记录时返回假：

https://github.com/meteor/meteor/wiki/Using-Blaze#conditional-attributes-with-no-value-eg-checked-selected

如何在渲染上从反应数据源正确设置复选框选中的属性

3 个答案: