Skip to content

Instantly share code, notes, and snippets.

@aboutlo
Created March 8, 2015 23:20
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save aboutlo/1e4c0080cf5505e99d2c to your computer and use it in GitHub Desktop.
Simple Test with Backbone using VirtualDom, Underscore Template and ConvertHTML
'use strict';
var $ = require('jquery');
var _ = require('underscore');
var Backbone = require('backbone');
Backbone.$ = $;
var h = require('virtual-dom/h');
var diff = require('virtual-dom/diff');
var patch = require('virtual-dom/patch');
var createElement = require('virtual-dom/create-element');
var VNode = require('virtual-dom/vnode/vnode');
var VText = require('virtual-dom/vnode/vtext');
var convertHTML = require('html-to-vdom')({
VNode: VNode,
VText: VText
});
var MainView = Backbone.View.extend({
template: require('../templates/main.tpl'),
tagName:'section',
className:'main',
initialize: function(){
this.listenTo(this.model,'change',this.render);
this.count = 0;
this.tree = h("div"); // initial state
this.rootNode = createElement(this.tree);
this.$el.append(this.rootNode);
setInterval(_.bind(this.render,this),500);
},
render: function(){
this.model.set({status:this.count++}, {silent:true});
var newTree = convertHTML(this.template(this.model.attributes));
var patches = diff(this.tree, newTree);
this.rootNode = patch(this.rootNode, patches);
this.tree = newTree;
return this;
}
});
module.exports = MainView;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment