如何使用blaze自定义html元素

时间:2016-07-19 16:39:27

标签: meteor meteor-blaze

一个简单的例子,你可以理解我:

我有一个名为button的模板:

<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 ?
   }
});

2 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

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

的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');
    }
});