使用来自不同按钮的 'click' 事件的流星将不同的 data/color 传递给 canvas 元素

Question

我需要用Meteor把每个按钮的功能分开。（例如：红色按钮 -> 将 canvas 设为红色，蓝色按钮 -> 将 canvas 设为蓝色，等等）

这是我试过的：

HTML

<body>
 <main>
    <canvas class='background' width="400" height="200"></canvas>
    <button id='red'>RED</button>
    <button id='blue'>BLUE</button>
    <button id='green'>GREEN</button>

  </main>
</body>

Template.js

Template.body.helpers({
  hello: 'Hi World'
})

Template.body.events({
  'click.red': function (e) {
    $('.background').css({ "background-color": "#ff0000", "color": "white" });
  }
});
Template.body.events({
  'click.blue': function (e) {
    $('.background').css({ "background-color": "#0000ff", "color": "white" });
  }
});
Template.body.events({
  'click.green': function (e) {
    $('.background').css({ "background-color": "#01bf2a", "color": "white" });
  }
});

Answer 1

使用 click #red 而不是 click.red。 meteor 中的选择器与 ins html-css-js- # for id 和 . class.

Template.body.events({
  'click #red': function (e) {
    $('.background').css({ "background-color": "#ff0000", "color": "white" });
  }
});
Template.body.events({
  'click #blue': function (e) {
    $('.background').css({ "background-color": "#0000ff", "color": "white" });
  }
});
Template.body.events({
  'click. #green': function (e) {
    $('.background').css({ "background-color": "#01bf2a", "color": "white" });
  }
});

使用来自不同按钮的 'click' 事件的流星将不同的 data/color 传递给 canvas 元素

Passing different data/color to a canvas element using meteor from the 'click' event of different buttons

javascript

meteor

meteor-blaze