Question

我正在创建我的第一个Meteor应用。简单的想法：用户可以在一个模板上提交双关语（提示和答案）或在另一个模板上查看随机双关语。双关语包含在＆＃34; Puns＆＃34;采集。插入工作正常，但我无法弄清楚如何显示随机Puns对象 - （1）首次渲染模板时或（2）用户点击＆＃34;更多双关语＃34;按钮。

（1）流星 - 客户

Session.setDefault('randomPun', null);

Template.punDisplay.helpers({
  pun: function () {
    var array = Puns.find().fetch();
    var randomIndex = Math.floor( Math.random() * array.length );
    var pun = array[randomIndex];
    Session.set('randomPun', pun);
  }
});

Template.displayPun.events({
  // Should load a pun when "more pun" btn is clicked.
  'click [data-action="getPun"]': function (event, template) {
    Session.set('randomPun', pun);
  }
});

（2）模板

<template name="punDisplay">
  <div class="container">
    <h1 class="item">take a pun</h1>
      {{#with randomPun}}
        <p class="item">{{prompt}}</p>
        <p class="item">{{answer}}</p>
      {{/with}}
    <button class="item btn" data-action="getPun">more pun</button>
  </div>
</template>

同样，我希望的结果是，当用户第一次到达＆＃34; displayPun＆＃34;时，会有预先加载的双关语对象（提示和回答）。模板然后用Puns集合中的随机双关语对象做出反应，如果用户点击＆＃34;更多双关语＆＃34;按钮。

感谢您和mahalo的任何建议。

Answer 1

基本上你需要在渲染模板时初始化随机双关语，然后在点击时更新。 Random.choice()函数对于获取数组的随机成员非常有用。

function selectRandomPun(){
  var puns = Puns.find().fetch;
  Session.set('randomPun', Random.choice(puns));
}

Template.punDisplay.onCreated(selectRandomPun);

Template.punDisplay.helpers({
  randomPun: function () {
    return Session.get('randomPun');
  }
});

Template.displayPun.events({
  'click [data-action="getPun"]': selectRandomPun
});

Meteor：在事件上显示随机集合对象

1 个答案: