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

Question

我正在创建我的第一个 Meteor 应用程序。简单的想法：用户可以在一个模板上提交双关语（提示和答案）或在另一个模板上查看随机双关语。双关语包含在 "Puns" 集合中。插入有效，但我不知道如何显示随机双关语对象——(1) 首次呈现模板时或 (2) 用户单击 "more pun" 按钮时。

(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>

同样，我想要的结果是当用户第一次到达 "displayPun" 模板时会有一个预加载的双关对象（提示和回答），然后与 Puns 集合中的随机双关对象做出反应如果用户单击 "more pun" 按钮。

感谢您和 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: Display random collection object on event

javascript

meteor

meteor-blaze