Question

我正在玩Meteor并希望做一些简单的事情。如果选中复选框，则加载模板。所以我得到了：

<body>
  <label>
    <input type="checkbox" id="checker">
    Load Text
  </label>
  {{> check}}
</body>

<template name="check">
  {{#if isTrue}}
    <h3>Some Text</h3>
  {{/if}}
</template>

我想我需要一个Session才能保持状态。所以我写道：

Session.setDefault('key', false);
Template.check.isTrue = function() { Session.get('key'); };
Template.check.events({
  'change #checker': function() {
    if (document.getElementById('#checker').checked)
      Session.set('key', true);
    else
      Session.set('key', false);
  }
});

我觉得我很困惑Sessions在Meteor中如何运作。任何提示或帮助表示赞赏。谢谢。

Answer 1

在这种情况下，您需要将事件绑定到父模板;例如：

<body>
  {{> parentTemplate}}
</body>

<template name="parentTemplate">
  <label>
    <input type="checkbox" id="checker">
    Load Text
  </label>
  {{> check}}
</template>

<template name="check">
  {{#if isTrue}}
    <h3>Some Text</h3>
  {{/if}}
</template>

和js：

Session.setDefault('key', false);

// Edit: It appears that this is deprecated
// Template.check.isTrue = function() { Session.get('key'); };

// Use 'helpers' instead
Template.check.helpers({
  'isTrue': function () {
    return Session.get('key');
  }
})

Template.parentTemplate.events({
  'change #checker': function() {
    // Also, no need for the pound sign here
    if (document.getElementById('checker').checked)
      Session.set('key', true);
    else
      Session.set('key', false);
    }
});

Answer 2

通常，为了动态加载模板，我们会得到类似的结果：dynamic template

<body>
  <label>
    <input type="checkbox" id="checker">
    Load Text
  </label>
  {{>Template.dynamic template=getTemplate}}
</body>

<template name="check">
    <h3>Some Text</h3>
</template>

在父js文件中

Template.parentTemplate.events({
  'change #checker': function(event) {
    if ($(event.target).attr('checked')) {
      Session.set('template', 'check');
    } else {
      Session.set('template', '');
    }
});


Template.parentTemplate.helper({
    getTemplate: function(){return Session.get('template');});
});

如果在Meteor中选中了复选框，则加载模板

2 个答案: