Custom Binders

A directory of custom binders. If you've implemented a binding routine that you've found useful, chances are others will too. This is a place to share them. For the core binders, check out the Core Binders page.

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.

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

  if(value) {
    $(el).addClass(value)
    el.addedClass = value
  }
}

<i class="icon" data-addclass="item.icon"></i>

<!-- Set item.icon to "star" -->
<i class="icon star" data-addclass="item.icon"></i>

<!-- Set item.icon to "retweet" -->
<i class="icon retweet" data-addclass="item.icon"></i>

src-strict

Similar to src, but only updates the element's src attribute if the image url successfully loads.

rivets.binders['src-strict'] = function(el, value) {
  var img = new Image()

  img.onload = function() {
    $(el).attr('src', value)
  }

  img.src = value
}

append

Appends or removes the value from the array at the specified keypath.

rivets.binders.append = {
  routine: function(el, value) {
    el.checked = _.contains(value, el.value)
  },

  bind: function(el) {
    var adapter = rivets.config.adapter
    var self = this

    this.callback = function() {
      currentValue = _.clone(adapter.read(self.model, self.keypath))

      if(el.value && _.contains(currentValue, el.value)) {
        newValue = _.without(currentValue, el.value)
        adapter.publish(self.model, self.keypath, newValue)
      } else {
        currentValue.push(el.value)
        adapter.publish(self.model, self.keypath, currentValue)
      }
    }

    $(el).on('change', this.callback)
  },

  unbind: function(el) {
    $(el).off('change', this.callback)
  }
}

style-*

Sets a generic CSS property.

rivets.binders['style-*'] = function(el, value){
  el.style.setProperty(this.args[0], value);
};

<p rv-style-background-color="item.color">

selectize-value

Adds value binder for Selectize.js.

rivets.binders['selectize-value'] = {
  routine: function(el, value) {
    if (value !== el.selectize.getValue()) {
      return el.selectize.setValue(value, true);
    }
  },
  getValue: function(el) {
    return el.selectize.getValue();
  },
  bind: function(el) {
    return el.selectize.on('change', this.publish);
  },
  unbind: function(el) {
    return el.selectize.off('change', this.publish);
  }
};

<select data-role="selectize" rv-selectize-value="data.contact.countryOfResidenceId" rv-on-change="controller.countryOfResidenceIdChanged" name="contact[country_of_residence_id]">

order

Orders DOM elements based on a bound value

rivets.binders['order'] = function(el, value){
    el.setAttribute("data-order-value",value);
    if(el.parentNode===null) return;
    var siblings = el.parentNode.childNodes;
    for(var i = 0 ; i < siblings.length ; i++){
        if(! (siblings[i] instanceof Element)) continue;
        if(siblings[i].getAttribute("data-order-value")>value){
            el.parentNode.insertBefore(el, siblings[i]);
            return;
        }
    }
    el.parentNode.appendChild(el);
}

<div rv-order="obj.OrderBy">