- \
- \
');
function ViewModel(){
this.items = [
{ title : "Item One" },
{ title : "Item Two" },
{ title : "Item Three" }
];
};
eggs($,{selector : '#content'},ViewModel);
``In your preferred server side library, you can render the content by grabbing the html from cheerio:
javascript`
res.render($.html());`This will send the following response to your client:
html`
Item One
Item Two
Item Three
`On the client, you'll now have bootstrapped content, but you can re-bind if you want to make changes in real time:
javascript`
function ViewModel(){
this.items = [
{ title : "Item One" },
{ title : "Item Two" },
{ title : "Item Three" }
];
};
eggs($,{selector : '#content'},ViewModel);`This is a bit of a contrived example, but since your viewmodels now work on both the server and the client, you're able to either generate or retrieve the same data from your API, and it'll be rendered on both.
Also, on the client you can now make changes and it'll automatically update the DOM:
javascript`
viewModel.items.push({ title : 'Another Item'});`And now your html will instantly update to:
html`
Item One
Item Two
Item Three
Another Item
repeatWe're using 2 directives in this example,
, andtext. There are a few more, covered in the API docs.constructor/factoryAPI Docs:
======####
`javascript`
var eggs = require('eggs');/**
* factory - the factory that instantiates an eggs instance
*
* @param {function} $ - a cheerio-compatible $ Object
* @param {object} options - an optional object with options
* @param {function} ViewModel - a constructor function for a viewModel
* @param {function} callback - an optional callback for when we complete setup
*
* @return {object} eggs - an instantiated eggs object
*/
var e = eggs($,options,ViewModel,callback);selectorthe top level eggs object is a factory that returns an instance of eggs.
You must pass a first argument of $, which should be a cheerio compatible, jQuery-like object/function.
The second argument is an optional hash of options, which can be one or more of:
-
: a css selector of the root level object for the viewmodel you intend to bind. If you pass a selector and it is unmatched, we will not instantiate the passed ViewModel.prefix
-: a string, used to define what the directive prefix is. Defaults toe.directives
-: a hash of custom directives, with names as keys and directive functions as values.eggs.updateThe third argument is a ViewModel constructor. It must be a function, and will be called by eggs.
The constructor takes one optional argument, a callback for asynchronous ViewModels. If your ViewModel is not asynchronous, don't provide this argument and eggs will run non-async (and still call the main callback).The last argument is an optional callback, for when eggs has completed initial binding.
####
`javascript`
e.update();Object.observeForce an update to the latest viewmodel data - this is unnecessary (and does nothing) if your environment supports
, if you're polling, you'll have to call this to get instant updates - otherwise, updates will be delivered to the DOM in 1-100ms.attrDirectives:
======###TODO:
####
class####
html####
model####
on####
repeat####
show####
style####
text####
Object.observe` vs ones that don't. On normal browsers, observed models will be polled every 100ms and dirty checked for updates. If you're in Chrome 36+, everything will be much speedier. As more browsers adopt parts of the harmony spec, this library will speed up.Custom Directives:
======###TODO:
Caveats:
======- eggs is still under development, so APIs aren't locked down. However, there's not much to it, so things shouldn't change much.
- There is a significant performance difference when using eggs in an environment that supports
- eggs assumes your audience is somewhat modern. It supports modern browsers, but I won't be making an effort to support < IE 9 or similar. There's a chart at the top of this page with current test status per browser, and all of the directives are fully unit tested in all supported browsers.
- At the time of writing, I'm unaware of any server side jQuery-compatible libraries except cheerio, so although eggs doesn't include it as a dependency, to use eggs on the server you'll have to use it.