Rivets.js component example

by Nikita Polevoy

HTML

<script src="https://rawgit.com/mikeric/rivets/master/dist/rivets.bundled.min.js"></script>
<div id="rivetsSpace">
  <section>
    <h3>{ data.title }</h3>
    <p>Заказов: { data.zakazi }</p>
    <p>Стоимость: { data.subtotal }</p>
  </section>

  <button rv-on-click="controller.onAtbClick">Добавить</button>
  <button rv-on-click="controller.reset">Сбросить</button>
</div>

JavaScript

var initial_data = {
  title: 'Welcome',
  subtotal: 100,
  zakazi: [1, 2]
};

var controller = {
  onAtbClick: function(e, model) {
    model.data.zakazi.push(model.data.zakazi.length + 1);
    model.data.subtotal = model.data.zakazi.length * 50;
  },
  reset: function(e, model) {
    model.data = clone(initial_data);
  }
}

rivets.bind(
  document.querySelector('#rivetsSpace'), {
    data: clone(initial_data),
    controller: controller
  }
);

function clone(obj) {
  var copy;
  if (null == obj || "object" != typeof obj) return obj;
  if (obj instanceof Date) {
    copy = new Date();
    copy.setTime(obj.getTime());
    return copy;
  }
  if (obj instanceof Array) {
    copy = [];
    for (var i = 0, len = obj.length; i < len; i++) {
      copy[i] = clone(obj[i]);
    }
    return copy;
  }
  if (obj instanceof Object) {
    copy = {};
    for (var attr in obj) {
      if (obj.hasOwnProperty(attr)) copy[attr] = clone(obj[attr]);
    }
    return copy;
  }
  throw new Error("Unable to copy obj! Its type isn't supported.");
}