node package manager
Love JavaScript? Your insights can make it even better. Take the 2017 JavaScript Ecosystem Survey »



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

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>' +

Adding the Seam plugins

And we can add our plugins to Seam.

    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.


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:"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>

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