[nerv_]

Ractive.js

The diamond age of web development

• реализует паттерн MVVM, декларативный
• простой и понятный на первый взгляд
• размер ractive-0.7.3.min.js ~ 163kb
• одно/двухсторонний датабиндинг (есть флаг переключения режима)
• использует виртуальный дум
• есть "магический" режим, который позволяет использовать обычные объекты в качестве данных, меняя свойства которых вызывается рендер
• использует язык шаблонов Mustache. Удобно. Есть if/elseif/else, each,
• неплохая документация, обучалка
• когда то его советовал monolithed
• поддерживает концепцию компонент

Пример кода

<!--
   1. This is the element we'll render our Ractive to.
-->
<div id='container'></div>

<!--
   2. You can load a template in many ways. For convenience, we'll include it in
   a script tag so that we don't need to mess around with AJAX or multiline strings.
   Note that we've set the type attribute to 'text/ractive' - though it can be
   just about anything except 'text/javascript'
-->
<script id='template' type='text/ractive'>
    <p>Hello, {{name}}!</p>
</script>

var ractive = new Ractive({
  // The `el` option can be a node, an ID, or a CSS selector.
  el: '#container',

  // We could pass in a string, but for the sake of convenience
  // we're passing the ID of the <script> tag above.
  template: '#template',

  // Here, we're passing in some initial data
  data: { name: 'world' }
});