2017-02-13 4 views
1

拡張可能な流星で作成されたテーブルがあります。テーブルを展開するために押した最初のボタンにはプラスのアイコンがあります。テーブルが展開されたら、ボタン上のアイコンをマイナス記号に変更することはできません。基本的には、テーブルが展開されているか、折りたたまれているかによって、アイコンにプラス記号とマイナス記号を切り替える必要があります。ボタンの流星内のボタンでアイコンを切り替える

マイテンプレート:

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

テンプレートはHTMLでcallledと期待通りに動作します。

私の最も最近のattempはマイナス記号にプラス記号から切り替えるためのアイコンを取得するためにイベントを使用しようとしている:私もカップル他の方法を試してみました

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

が、何も働いていません。私はこれがこれを行う方法に近いか、これが完全に間違っているかどうかを知りたいと思います。これを行うのが間違った方法であれば、どうすればいいのですか?

ありがとうございました。それは感謝しています。

+1

'$(event.target).toggleClass'を試してください。 'event'オブジェクトは、DOMノードではなく、umhというイベントです。 –

+0

これは固定されていますが、アイコンが押された場合にのみアイコンが切り替わります。だから私がアイコンの外側を押すと、ちょうどボタンの上に、それはまだ変わらない。どのようにそれを回避するための任意のアイデア? –

+0

あなたがReactを使用していたなら、それは国家管理 –

答えて

2

メテオでは、イベントを適切な場所にバインドする必要があります。クリックイベントをボタンにバインドします。

<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)

すなわち、完全なDOMを解析し、より効率的で使用していることに注意してください
関連する問題