virtualbone

backbone.js with virtual DOM views

How to use

define(['virtualbone'], function (Backbone) {
    Backbone.View.extend({
        ...
        render:     function () {
            this.patch(this.template(this.model));
        }
        ...
    })
})

What you need to remember for

• your templates must contain outer html

<div id="content">

</div>

<script id="tpl" type="text/template">
    <div id="content">
        <div class="wrapper">
            <h1><%- page.get('title') %></h1>
        </div>
    </div>
</script>

Backbone.View.extend({
    el: document.querySelector('#content'),
    template: _.template(document.querySelector('#tpl').innerHTML)
}

• never change views root element tagname
• use data-ignore attribute to prevent nested views from diff

<script id="tpl" type="text/template">
    <div id="content">
        <div class="wrapper">
            <h1><%- page.get('title') %></h1>
            <div data-ignore class="items"></div>
        </div>
    </div>
</script>

initialize: function () {
    this.render();
    this.$el.find('.items').append('<span>nested views</span>');
},
...
render:     function () {
    this.patch(this.template(this.model));
}

that's all