JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<script src="http://squizzle.me/js/sqimitive/sqimitive.min.js"></script>
JavaScript
var MyModel = Sqimitive.Sqimitive.extend({
_opt: {
name: 'Иван',
surname: 'Петрович',
age: 900,
},
})
var MyView = Sqimitive.Sqimitive.extend({
_opt: {
model: null,
},
// Естественно, код шаблонов лучше всего выносить прямо в код самой страницы
// как <script id="MyView" type="text/template"> или новомодный <template>.
// По соглашению, в Sqimitive свойства и опции, начинающиеся с подчёркивания,
// предназначены для использования внутри этого класса и его потомков.
_template: _.template(
'<p class="name"><%- name %></p>' +
'<p class="surname"><%- surname %></p>' +
'<p class="age"><%- age %></p>'),
events: {
// При передаче начальных опций в конструктор, change и другие события
// вызываются, как положено (камень в огород Backbone).
change_model: function (newModel, oldModel) {
// Отключимся от старой модели, чтобы её изменения нас более не беспокоили.
oldModel && oldModel.off(this)
newModel.on('change', '_modelChanged', this)
},
render: function () {
// get() без параметров аналогичен toJSON() в Backbone, только
// возвращает поверхностную копию всех опций (shallow copy).
this.el.html( this._template(this.get('model').get()) )
},
},
_modelChanged: function (opt, value) {
if (/^(name|surname|age)$/.test(opt)) {
this.$('.' + opt).text(value)
}
},
})
var view = new MyView({
el: $('body'),
model: new MyModel,
})
// Начальная отрисовка. Где, кем и когда именно она происходит сильно зависит
// от вашего приложения. Можно делать в postInit, но это не всегда оптимально.
view.render()
$('<button>')
.click(function () {
view.get('model').set('name', 'Виталий')
})
.text('Сменить фамилию')
.appendTo('body')