If expression on html tag


#1

Hi all,

I have a div by default set to display:none. Now if hitting a button which changes the css style I want my stache to display the data in an object.

Is there any way to do something like

{{#if thishtmldisplaystyle=block}}
/Do the rendering/
{{/if}}

The only way I came up with is to extend my viewmodel with an extra value which I can then check for.
But this feels like mixing the data model with the way data is displayed.


#2

Use is or eq like {{if foo “bar”}}


#3

@nada Why don’t you want to display the data if the element is display:none?


#4

Good point: That was the original plan but I have a long list of 12 entries and adding the HTML to the DOM for each of these entries at once leads to delays. You can literally count to two until the page is updated.

The approach I am taking now is create several tags, assign a view-Model only holding the bool if the button to show details was clicked. In addition the “original” data structure. Here the part covering the details for the selected element is passed down from the previous tag.

Probably kind of wrong but at least it keeps the data and the view config separated.


#5

Ok, I’m not exactly following what your approach is. If you want to create a JSBin with a simplified example we can probably provide some guidance. You can use this JSBin to get started if you want: http://jsbin.com/safigic/7/edit?html,js,output.


#6

Thanks for the fast reply. You can find the example under
Example


#7

Ok, I think that approach makes sense.

You could also use the <content /> tag and leakScope: true if you don’t want to have to pass the data into your toggle component, like: http://jsbin.com/labonadota/1/edit?html,js,output.

Or, you could use a can-view-callbacks.attr if you don’t want to have a separate component. It will be pretty close to what is done in the example: https://canjs.com/doc/can-view-callbacks.attr.html. This will be a little harder to unit test though.


#8

Thanks. Your suggestions pretty much sound like the other options I had the feeling might be worth looking into if this approach would be way off.

I’ll see how far this approach will take me and give a short update should I need to adjust things.