如何使用 blaze 自定义 html 元素

Question

一个简单的例子，让你明白我的意思：

我有一个名为按钮的模板：

<template name="button">
   <button>
      //some content
   </button>
</template>

然后当我点击它时如何使用 JS 自定义它

Template.button.events({
   'click': function (e, t) {
      var b = e.currentTarget;
      // what i must do here ?
   }
});

Answer 1

Template.button.events({
  'click button': function (e, t) {
    let b = e.target
    b.style.width="100px"
}
})

Answer 2

不太确定你想要完成什么，但我会做这样的事情。

main.css

.blue-bg{
    background-color: blue;
}

main.html

<template name="button">
    <button data-my-button class={{bgColor}}>
        Click Me!
    </button>
</template>

main.js

Template.button.onCreated(function () {
    var instance = this;
    //default to no color
    instance.color = new ReactiveVar('');
});

Template.button.helpers({
    bgColor: function () {
        var instance = Template.instance();
        return instance.color.get();
    }
});

Template.button.events({
    'click [data-my-button]': function (event, instance) {
        instance.color.set('blue-bg');
    }
});

如何使用 blaze 自定义 html 元素

how to customize html element using blaze

meteor

meteor-blaze

我有一个名为按钮的模板：