npm install virtual-modelTurn a template into a virtual dom.
virtual-model uses virtual-dom, virtual-html, and observify.
This project is called virtual-model, but it really acts as both a model & view, similar to projects like Ractive and Vue.js, and was inspired by ampersand-virtual-dom-mixin.
``js
var template = require('lodash.template');
var model = require('virtual-model');
var str = '
str += ' data-foo="<%= foo %>"><%= text %> <%= count %>var options = {
el: document.body,
template: template(str),
data: {
count: 0,
text: 'pizzzzzaaaaa',
img: 'http://a.fod4.com/misc/Internet%20Pizza.gif'
}
};
var counter = model(options);
setInterval(function () {
options.data.count += 2;
if (options.data.count == 10) {
options.data.text += ' is awesoooooooome';
}
counter.set(options.data);
}, 2700);
`
`
npm install --save virtual-model
The options object has three properties:
- template
- can take a string or a compiled template function like Handlebars.compile(str)
- data
- _optional._ an object with the data you want to pass to the template function
- el
- _optional._ the html node that will serve as the parent element for the view
The optional callback provides an err parameter that exists if there was an error parsing the html.
Methods
Renders the the template with the data and updates the element.
The optional callback provides an err parameter that exists if there was an error parsing the html.
data is an object, array, or value that will update the data of the model and automatically run example.render() to update the dom.
Optionally specify the keypath for the property in the data that you'd like to set. The keypath can be nested, like this: 'some.nested.path', where the data in the model looks like this:
`js`
{ some: { nested: { path: 'value' } } }
Get data from the model. Optionally specify a keypath to get a specific property from the data.
Like the .set method, the keypath can be nested.
Returns the current html.
The el` argument is the html node that will serve as the parent element of the view.
The virtual-dom tree.
The element that can be added to the dom of the web page.
MIT