I thought this would be easier unless I'm missing something but I can't figure out how to output a piece of my data as a class.

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

doesn't work. It should say the value in that property "technology" or "service". Is there anyway to do string interpolation or something? Data attrs?

I thought this would be easier unless I'm missing something but I can't figure out how to output a piece of my data as a class.

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

doesn't work. It should say the value in that property "technology" or "service". Is there anyway to do string interpolation or something? Data attrs?

• javascript
• rivets.js

Share Improve this question Follow asked Apr 7, 2015 at 20:56 danheredanhere 68011 gold badge88 silver badges2121 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

I ended up using something like

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

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

You can find in the official Github documentation page, a simple custom Binder which behaves exactly as you require: It assigns dynamically the className stored in your variable, to the bound element.

AddClass (rv-addclass)

Adds a new class to the element (using the attribute value) in addition to any existing ones. On subsequent changes, the previously added class is replaced with the 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;
  }
};

Usage:

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

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

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

You can now use it like this:

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