CODEWITHSUNDEEP
javascriptrivets.js
danhere
danhere

Reputation: 680

Outputting a class with Rivets.js?

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?

Upvotes: 5

Views: 2030

Answers (3)

colxi
colxi

Reputation: 8670

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>

Upvotes: 2

peerbolte
peerbolte

Reputation: 1199

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>

Upvotes: 1

danhere
danhere

Reputation: 680

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

Upvotes: 4

Related Questions