Question

我刚刚开始使用MeteorJS

如果我有一系列按钮，是否有办法根据我点击的按钮更改页面的正文文本？

如果我有一个名为＆＃34; Hello＆＃34;的按钮，我希望正文可以更改为＆＃34; Hello＆＃34;。

由于

Answer 1

使用Session变量。

HTML

<body>
  {{> main}}
</body>

<template name="main">
  <p>{{text}}</p>
  {{> button}}
</template>

<template name="button">
  <button type="button">Hello</button>
</template>

JS

Template.main.onCreated(function(){
  Session.set("text", "Default");
});

Template.main.helpers({
  text: function(){
    return Session.get("text");
  }
});

Template.button.events({
  "click button": function(event, template){
    var buttonText = template.$("button").text();
    Session.set("text", buttonText);
  }
});

使用ReactiveVar来避免全局变量并提供更好的组件封装。

HTML是一样的。

JS

Template.main.onCreated(function(){
  this.text = new ReactiveVar("Default");
});

Template.main.helpers({
  text: function(){
    return Template.instance().text.get();
  }
});

Template.button.events({
  "click button": function(event, template){
    var buttonText = template.$("button").text();
    // search for a field named text in the closest parent template (main)
    template.get("text").set(buttonText);
  }
});

我们需要为此代码添加2个包才能正常工作：

meteor add reactive-var
meteor add aldeed:template-extension

多个按钮可更改Meteor应用程序的文本

1 个答案: