# 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

Latest version **0.0.1** (published 2014-04-27) · 0 weekly downloads

## Install

```sh
npm install seam-view
pnpm add seam-view
yarn add seam-view
bun add seam-view
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1 |
| Published | 2014-04-27 |
| First published | 2014-04-27 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Olivier Scherrer |
| Maintainers | podefr |
| Keywords | html, behavior, plugin, binding, template, declarative |

## Links

- npm: https://www.npmjs.com/package/seam-view
- Repository: git@github.com:flams/seam-view
- Homepage: https://github.com/flams/seam-view
- Issues: https://github.com/flams/seam-view/issues
- npm.io page: https://npm.io/package/seam-view

## Dependencies (3)

- [seam](https://npm.io/package/seam.md) 0.0.3
- [to-array](https://npm.io/package/to-array.md) ~0.1.4
- [synchronous-fsm](https://npm.io/package/synchronous-fsm.md) 0.0.3

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 0.0.1 (latest) — 2014-04-27

## README

#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

```bash
npm install seam-view
```

##How to use

###Require seam-view:

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

###Initialize SeamView:

```js
var seamView = new SeamView();
```

###Defining the template:

The template can come from a template string:

```js
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.

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

###Assigning the template:

Then we can add it to our SeamView:

```js
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.

```js
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:

```js
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().

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

```js
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.

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


LICENSE
=======

MIT

---
_Source: https://npm.io/package/seam-view · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._