on tampan

by hgoz

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/rivets/0.9.6/rivets.bundled.min.js"></script>
<p>Example:</p>

<div id="example" style="display:none">
<p>
  {data.nested.nested.prop | currency}
</p>
 <ul>
     <li rv-each-person="people" rv-data-pid="person.id">
        Name = <span>{person.name}</span>
        Id = <span>{person.id}</span>
        Nested = <span>{person.nested.nested.prop}</span>
        Test = <span  rv-nameorid="person.name"></span>
     </li>
 </ul>
 <button rv-on-click="data.dec">DEC</button>
</div>
<button onclick="go()">Go</button>

JavaScript

var people = [{"name" : "Joe Blogs", "id" : "100",
nested:{"prop":5,nested:{prop:-100} } }]
var data = {name : 'Osmano',nested:{"prop":5,nested:{prop:-1000} }
,dec:function(e,scope){
scope.data.nested.nested.prop -= 1000; 
}
};

rivets.binders.nameorid = function (el, value) {

    if (value){
        $(el).html(value);
    } else {
        $(el).html($(el).parent().data("pid"));
    }
}

rivets.formatters.currency = {
  read: function(value) {
    return (value / 100).toFixed(2)
  },
  publish: function(value) {
    return Math.round(parseFloat(value) * 100)
  }
}

function go(){
    rivets.bind($('#example').show(), { people : people,data:data });
    setInterval(function(){
    	people[0].nested.nested.prop ++;
      data.nested.nested.prop ++;
    },400);
}