Geek Answers Handbook

Class output using Rivets.js?

I thought it would be easier if I didn’t miss something, but I can’t figure out how to output some of my data as a class.

<div class="partner-type" rv-class="partner.partner-type"></div>

does not work. He must say the meaning of this property is “technology” or “service”. Is there a way to do string interpolation or something else? Attrs data?

+5
source share
3 answers

I ended up using something like

rv-class-ineededthisclass="partner.partner_type | isNotEqual 'premier'"

Btw, this library is great for rivetsjs: https://github.com/matthieuriolo/rivetsjs-stdlib

+4
source

I had the same problem. I created a binder called "rv-set-class" to solve the problem.

 rivets.binders['set-class'] = function(el, value){ el.className += ' '+ value; }

Now you can use it as follows:

 <div rv-set-class="partner.partner-type"></div>
+1
source

You can find on the official Github documentation page a simple custom Binder that behaves exactly as you need it: it dynamically assigns the class name stored in your variable to the associated element.

AddClass (rv-addclass)

Adds a new class to the element (using the attribute value) in addition to any existing ones. Subsequent changes will replace the previously added class with a new one.

Binder Declaration:

 rivets.binders.addclass = function(el, value) { if (el.addedClass) { $(el).removeClass(el.addedClass); delete el.addedClass; } if (value) { $(el).addClass(value); el.addedClass = value; } };

Using:

 <i rv-addclass="partner.partner_type"></i>
+1
source

More articles:


All Articles