Problem to change a style in a element of a template


#1

Hi everyone,

I want change the class in a table row when I click on it (i did it, i can see this change in the inspector of the navigator) but, when I change the class, the change is not refresh on the screen. I paste my code if it is more instructive:

I apologize in advance if the post is very long (and my engish).

/* CSS */

.not-selected-row{
background-color: #ffffff;
}
.selected-row{
background-color: #c2bce9;
}

/* Template */

< template name=“productsTable” >
< thead >
Content of head here…
< /thead >
< tbody >
{{#each product}}
{{>productValues}}
{{/each}}
< /tbody >
< /table >
< /div >
< /template >
< template name=“productValues” >
< tr class=".not-selected-row">
Content of tr element here…
< /tr >
< /template >

/* js */

Template.productValues.events({
‘click tr’: function(event, template){
/* @event: for events called
@template: for manipulate the DOM of temeplate
*/
event.preventDefault();
//To click on the row change the class
if(template.$(‘tr’).hasClass(’.not-selected-row’)){
template.$(‘tr’).removeClass(’.not-selected-row’).addClass(’.selected-row’);
}else{
template.$(‘tr’).removeClass(’.selected-row’).addClass(’.not-selected-row’);
}
}
});

Thanks for your help. Best regards.


#2

class string in addClass and removeClass does not start with “.”


#3

Hi Shock,

You’re right. Also I had to change the value of the class in < tr class=“not-selected-row” > , before I wrote it “.not-selected-row”.

Lack of sleep is terrible

Than for your help. Best regards.


#4

still, I would do it using Session/reactive variable like

<div class="{{ourVariable}}">

when ourVariable is helper which returns

Session.get("ourVariable")
and than in event do just

Session.set("ourVariable", something);

Or similar concept with template scoped reactive variable if you are on that level

also you can do IF in class itself

<div class="{{#if someTest}}selected-row{{else}}not-selected-row{{/if}}">


#5

Hi,

Thanks for your feedback. I tried do it as you write but I have not affected only at a row. I have affected all rows always.

/* Template */

< tr class="{{#if selectedRow}}selected-row{{else}}not-selected-row{{/if}}" >

/* JS */

Template.productValues.helpers({
selectedRow: function(){
Session.setDefault(‘selectedRow’, false);
return Session.get(‘selectedRow’);
}
});

Template.productValues.events({
‘click tr’: function(event, template){
/* @event: for events called
@template: for manipulate the DOM of temeplate
*/
event.preventDefault();
var selectedRow=Session.get(‘selectedRow’);

if(selectedRow){
  Session.set('selectedRow', false);
}else {
  Session.set('selectedRow', true);
}  

}
});

Best regards.