seam-view

#seam-view

Seam-view is the perfect companion to Seam, the tool to add behavior to your HTML via plugins. Seam view will wrap your template (HTML template or DOM elements) and bind it to seam in an easy to use wrapper that you can attach to the DOM and place wherever you want.

##Installation

npm install seam-view

##How to use

###Require seam-view:

var SeamView = require("seam-view");

###Initialize SeamView:

var seamView = new SeamView();

###Defining the template:

The template can come from a template string:

var template = '<ul data-binding="foreach">' +
    '<li data-binding="bind: innerHTML, value"></li>' +
'</ul>';

###Adding the Seam plugins

And we can add our plugins to Seam.

seamView.seam.addAll({
    binding: new DataBinding(collection)
});

###Assigning the template:

Then we can add it to our SeamView:

seamView.template = template;

###Rendering the seamView

When we're ready to render the view, seamView will transform our text HTML into some DOM elements and also bind the JS behavior to the HTML, if we've added the plugins to Seam.

seamView.render();

###Placing the seamView in the dom

We now have rendered the view and the plugins have been applied to the DOM. We can place our view whenever we're ready:

seamView.place(document.querySelector("main"));

Note : if place is called before render(), then seamView will do the render for us.

###Now, if the template is already a DOM element present in the DOM

Then we can directly make the DOM 'alive', i.e. attaching the JS behavior to the DOM via seam, by calling seamView.alive().

<ul data-binding="foreach">
    <li data-binding="bind: innerHTML, value"></li>
</ul>

seamView.alive(document.querySelector("ul"));

###Moving seamView around:

SeamView is now a rendered view, and moving it around is as easy as calling place() again. The behavior will remain attached to the dom.

seamView.place(document.querySelector(".anotherPlace"));

LICENSE

MIT