2017-02-13 16 views
1

У меня есть таблица, созданная в метеор, которая расширяема. Начальная кнопка, которая нажата для расширения таблицы, имеет значок плюса. Как только таблица будет развернута, я не смогу сделать значок на кнопке изменен на знак минуса. В основном, я хочу, чтобы значок переключался между знаком «плюс» и «минус» в зависимости от того, была ли таблица развернута или свернута.Переключая значок на кнопке в метеор

Мой шаблон для кнопки:

<template name="expandButton"> 
    <button class="btn btn-default btn-xs btn-circle"> 
    <span id="expand" class="glyphicon glyphicon-plus"></span> 
    </button> 
</template> 

Шаблон callled в HTML и работает, как ожидалось.

Мой последний attemp пытался использовать событие для получения значка, чтобы перейти от знака плюс к минус:

Template.expandButton.events({ 
    'click #expand'(event) { 
    event.toggleClass('glyphicon-plus glyphicon-minus'); 
    } 
}) 

Я также попробовал несколько других способов, но ничего не работает , Я хотел бы знать, подходит ли это тому, как это сделать, или если это совершенно неправильно. И если это неправильный способ сделать это, как я должен это делать?

Спасибо за любую помощь. Это ценно.

+1

попробуйте '$ (event.target) .toggleClass'. Объект 'event' является событием, umh, а не узлом DOM. –

+0

ОК, чтобы зафиксировать его, но он только переключает значок, если значок нажат. Поэтому, если я нажимаю значок, просто на кнопке, он все равно не переключается. Любая идея, как обойти это? –

+0

Если вы использовали React, то было бы так просто с управлением государством –

ответ

2

В Meteor вы должны привязать события к правильным местам. вы хотите привязать событие click к кнопке.

<template name="expandButton"> 
    <button class="btn btn-default btn-xs btn-circle" id="expandBtn"> 
     <span id="expand" class="glyphicon glyphicon-plus"></span> 
    </button> 
</template> 

и вот ваше событие

Template.expandButton.events({ 
    'click #expandBtn'(event, temp) { 
     temp.$('#expand').toggleClass('glyphicon-plus glyphicon-minus'); 
    } 
}) 

Пожалуйста, обратите внимание, что в метеорных событиях, первый аргумент event и второй template поэтому использование temp.$ является более эффективным, то разбором полного РОМА т.е. $(#id)