How to bind style attribute top and left in rivet.js

Question

How do I bind an object such as i:

 var Item = function() {
        this.x = 10;
        this.y = 10;
    }
var i = new Item();

to a div that has style "position: relative; left: {x}; top: {y}"

Using http://rivetsjs.com/

Answer 1

You need to create a custom binder for that:

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

... then ...

<p rv-style-left="item.x" rv-style-top="item.top">