Есть замечательный фреймворк построения веб-приложений — Polymer. Это даже скорее не фреймворк, а реализация идеологии WebComponents в современных реалиях веб-браузеров.
Если кратко, то с его помощью можно реализовывать полноценный, удобный и быстрый (как с точки зрения производительности решения, так и скорости разработки) MVVM в JavaScript:
<dom-module id="my-component">
<template>
<h4>ToDo list for {{name}}:</h4>
<ul>
<template is="dom-repeat" items="{{model.todoitems}}">
<li>{{item.title}}</li>
</template>
</ul>
<button title="ChangeName" on-tap="ChangeName"></button>
</template>
</dom-module>
<script>
Polymer({
is: 'my-component',
name: 'Artur',
model: {
items: [
{title: '1'}
]
},
ChangeName: function() {
this.model.name = this.name + "_1";
},
});
</script>
В WPF мы привыкли, что интерфейс перерисовывается автоматически, при изменении значения свойства: this.name = ‘New Name’;. Однако у многих js-mvvm-фреймворков, присвоения приходится производить с помощью магических функций: this.set(‘name’, this.name + «_1»). В Polymer успешно работает первый (удобный :)) вариант, однако при работе с массивами и вложенными объектами эти прелести заканчиваются. Код добавления новых элементов в список ToDo выглядит примерно так:
Add: function() {
this.push('items', {title: 'another item'});
}
Редактирование же элементов в списке (например, изменение title) будет еще более ужасным:
this.set('items.1.title', 'new title!');