Question

我有一些“用户设置”，我希望基于我在启动时执行的查询。例如，我的所有设置字段都是复选框输入，我将根据他们之前选择存储在数据库中的首选项将它们设置为是或否。

我的客户端查询如下：

   Meteor.call('getNotificationPreferences', function(err, result) {
        console.log(result);
        Session.set('aNotificationPreference', result.a);
        Session.set('bNotificationPreference', result.b);
        Session.set('cNotificationPreference', result.c);
        Session.set('dNotificationPreference', result.d);
    });

此调用只是从MongoDB中提取该信息并正确设置会话变量，但之后我想使用该会话变量来设置复选框字段“checked”属性。我试图用jQuery直接设置它，并且还与Meteor反应。有时它会起作用，有时却不起作用。

HTML看起来像这样（使用jquery mobile）：

<template name="preferences">
    <div data-role="collapsible" data-collapsed="false" data-collapsed-icon="mail" data-expanded-icon="edit">
        <h2>Notifications</h2>
            <div class="ui-field-contain">
                <label for="aNotificationSwitch">A</label>
                <input type="checkbox" data-role="flipswitch" data-theme="b" name="aNotificationSwitch" id="aNotificationSwitch" data-mini="true" checked={{aNotification}}>
            </div>
            <div class="ui-field-contain">
                <label for="bNotificationSwitch">B</label>
                <input type="checkbox" data-role="flipswitch" data-theme="b" name="bNotificationSwitch" id="bNotificationSwitch" data-mini="true" checked="{{bNotification}}">
            </div>
            <div class="ui-field-contain">
                <label for="cNotificationSwitch">C</label>
                <input type="checkbox" data-role="flipswitch" data-theme="b" name="cNotificationSwitch" id="cNotificationSwitch" data-mini="true" checked="{{cNotification}}">
            </div>
            <div class="ui-field-contain">
                <label for="dNotificationSwitch">D</label>
                <input type="checkbox" data-role="flipswitch" data-theme="b" name="dNotificationSwitch" id="dNotificationSwitch" data-mini="true" checked="{{dNotification}}">
            </div>
    </div>
</template>

然后在我的JavaScript中，我有以下内容：

Template.preferences.aNotification = function() {
    // Setting directly doesn't work either
    //$('#aNotificationSwitch').prop('checked', Session.get("aNotificationPreference"));
    return Session.get("aNotificationPreference");
};

有人可以解释为什么这不会一直有效吗？

我也尝试过以Meteor的方式，通过发布如下偏好：

   Meteor.publish("user-preferences", function () {
    return Meteor.users.find({_id: this.userId},
        {fields: {'notification': 1}});
});

Answer 1

HTML复选框的checked属性不应设置为"true"或"false"，因为您尝试在代码中执行操作，而是分别设置为"checked"而不设置任何内容。< / p>

<input type="checkbox" checked>

与

相同

<input type="checkbox" checked="checked">

这两个示例将复选框设置为活动（已选中）状态，但第一个示例更可取，因为它更简洁。

通过不指定属性来实现未选中的复选框：

<input type="checkbox">

就Meteor而言，将你的助手改为：

Template.preferences.aNotification = function() {
    return Session.get("aNotificationPreference")?"checked":"";
};

在HTML中，只需执行：

<input type="checkbox" {{aNotification}}>

从设计的角度来看，我不会将用户设置存储在通过方法调用从服务器获取的Session个变量中，它听起来不是很流行。

您是否考虑将这些设置存储为Meteor.user()对象中的属性？这将涉及通过方法调用设置这些属性，然后显式地将属性发布到客户端。

服务器发布：

Meteor.publish("userSettings",function(){
  if(!this.userId){
    this.ready();
    return;
  }
  return Meteor.users.find(this.userId,{
    fields:{
      "profile.settings":1
    }
  });
});

客户：

// this should be put in a iron:router RouteController waitOn !
Meteor.subscribe("userSettings");

Template.preferences.helpers({
  aNotification:function(){
    if(!Meteor.userId()){
      return "";
    }
    // this will fail if the publication is not yet ready
    // either guard accessing sub properties (this is bad)
    // or use iron:router to wait on the subscription (this is good)
    return Meteor.user().profile.settings.a?"checked":"";
  }
});

使用Meteor运行查询并设置复选框字段默认值

1 个答案: