使用meteor在body中添加按钮并从JS函数中获取值

时间:2015-06-28 09:38:56

标签: javascript meteor

这是我的要求。

当我点击HTML中的按钮时,它 应该从JavaScript调用一个方法。那种方法必须 返回一个我可以在HTML页面中打印的值。

请告知。

<body>
<button class="test"> TEST !!!</button>
<li>{{test}}</li> // This value keep on change when i click the button
</body> 

 JS:Template.body.events({
'click .test': function ()
 {
 userName=random value;
 return userName;
 }
});

1 个答案:

答案 0 :(得分:1)

试试这个:

HTML:

<body>
  <button class="test"> TEST !!!</button>
  <p>{{test}}</p> // This value keep on change when i click the button
</body>

JS:

Template.body.helpers({
  test: function() {
    return Session.get('randomValue');
  }
});

Template.body.events({
  'click .test': function(evt, tpl) {
    Session.set('randomValue', (Math.random() * 100).toFixed(0));
  }
});

我建议您查看Meteor的官方教程:https://www.meteor.com/tutorials/blaze/creating-an-app

编辑:您可以在不使用全局会话变量的情况下执行此操作。您可以使用reactive-var包。

将reactive-var包添加到您的项目中:

meteor add reactive-var

您的JS档案:

function generateRandomNum() {
  return (Math.random() * 100).toFixed(0);
}

Template.body.onCreated(function() {
  //set default value of reactive var
  this.randomValue = new ReactiveVar(generateRandomNum());
});

Template.body.helpers({
  test: function() {
    return Template.instance().randomValue.get();
  }
});

Template.body.events({
  'click .test': function(evt, tpl) {
    tpl.randomValue.set(generateRandomNum());
  }
});

了解有关范围反应的更多信息:https://dweldon.silvrback.com/scoped-reactivity

在文档中详细了解ReactiveVar:http://docs.meteor.com/#/full/reactivevar