Как изменить свойства CSS в шаблонах Meteor?

Я пытался решить эту проблему в течение нескольких дней, но не нашел решения. Я работаю над веб-приложением, целью которого является получение информации из БД. Я использую Метеор и Блейз. На самом деле, я хотел бы изменить свойства css в событии шаблона, независимо от того, касается ли оно свойств css целевого элемента клика или любого элемента DOM в том же шаблон.

Вот мой тег кода шаблона:

<button type="button" class="buttonsValue" value="{{value}}"> 
        <div class="CheckButtonsLed"></div>
</button> 

Вот мой код события шаблона:

Template.devicesConfiguration.events({

    'click .buttonsValue':function(e, template){

//works well on the parent of the target of the click event :

    $(e.target.parentElement).css('background-color', 'chartreuse');

//works well on the target of the click event :

    e.target.style.backgroundColor="#ffcccc";

//does the same thing but with a different syntax :

    $(e.currentTarget).css('background-color', '#ffcccc');

// Does not work ...

    var CheckButtonsLed = template.find('.CheckButtonsLed');
    CheckButtonsLed.style.marginLeft = '2 em';
    }
});

Кажется, что ему не нравятся пропорции полей, хотя он работает для свойства фона. мой элемент класса - это мой шаблон devicesConfiguration.

Сначала я подумал, что это потому, что цель свойства поля не является целью моего события клика, но я безрезультатно пытался изменить поле цели события (.buttonsvalue)...

у кого-нибудь есть идея? большое спасибо ! :)


person E.B    schedule 26.06.2017    source источник
comment
stackoverflow.com/q/12982269/2298362. Проверь это !   -  person Prabodh M    schedule 26.06.2017
comment
Спасибо ! конечно. Я собираюсь посмотреть, могу ли я теперь изменить свойства CSS с помощью этой кнопки: ‹label class=buttonsValue› ‹input type=checkbox› ‹div class=CheckButtonsLed›‹/div› ‹/label›   -  person E.B    schedule 26.06.2017
comment
Ну, у меня нет ошибок, но свойство css не меняется: Template.devicesConfiguration.events({ 'click .buttonsValue': function(e, template){ var simpleInput = template.find('#simpleInput');simpleInput. style.padding = '2 см';   -  person E.B    schedule 26.06.2017


Ответы (1)


Хорошо, теперь это работает. он имеет дело с синтаксисом:

я написал

simpleInput.style.padding = '2 em';

вместо ...

simpleInput.style.padding = '2em';

в двух словах, чтобы изменить свойство CSS элемента DOM (который не является целью события) в шаблоне метеора:

Template.devicesConfiguration.events({

    'click .buttonsValue':function(e, template){

        var simpleInput = template.find('#simpleInput');

        simpleInput.style.padding = '2em';

    }

});

и не помещайте элемент div в тег кнопки...

До свидания !

person E.B    schedule 26.06.2017
comment
Отлично у тебя получилось! - person Prabodh M; 26.06.2017