5

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?

danhere
  • 680
  • 1
  • 8
  • 21

3 Answers3

4

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

danhere
  • 680
  • 1
  • 8
  • 21
2

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>
Community
  • 1
  • 1
colxi
  • 7,640
  • 2
  • 45
  • 43
1

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>
peerbolte
  • 1,169
  • 11
  • 19