node package manager

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 whereve

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.

npm install seam-view
var SeamView = require("seam-view");
var seamView = new SeamView();

The template can come from a template string:

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

And we can add our plugins to Seam.

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

Then we can add it to our SeamView:

seamView.template = template;

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();

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.

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"));

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