# marionette.templateview

> TemplateView introduces a few efficiencies for working with views and templates.

Latest version **1.4.1** (published 2016-04-21) · Unlicense license · 0 weekly downloads

## Install

```sh
npm install marionette.templateview
pnpm add marionette.templateview
yarn add marionette.templateview
bun add marionette.templateview
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.4.1 |
| Published | 2016-04-21 |
| First published | 2016-04-02 |
| Weekly downloads | 0 |
| License | Unlicense |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Known vulnerabilities | 0 (+4 in 1 direct dependencies) |
| Install scripts | yes |
| Author | Howard Roark |
| Maintainers | howardroark |
| Keywords | backbone, marionette, template, view |

## Links

- npm: https://www.npmjs.com/package/marionette.templateview
- Repository: https://github.com/howardroark/marionette.templateview
- Homepage: https://github.com/howardroark/marionette.templateview#readme
- Issues: https://github.com/howardroark/marionette.templateview/issues
- npm.io page: https://npm.io/package/marionette.templateview

## Dependencies (4)

- [jquery](https://npm.io/package/jquery.md) ^2.2.2
- [backbone](https://npm.io/package/backbone.md) ^1.3.2
- [morphdom](https://npm.io/package/morphdom.md) ^1.1.4
- [backbone.marionette](https://npm.io/package/backbone.marionette.md) ^2.4.5

## Recent versions

- 1.4.1 (latest) — 2016-04-21
- 1.4.0 — 2016-04-21
- 1.3.3 — 2016-04-19
- 1.3.2 — 2016-04-07
- 1.3.1 — 2016-04-06
- 1.3.0 — 2016-04-02
- 1.2.0 — 2016-04-02
- 1.1.1 — 2016-04-02
- 1.0.0 — 2016-04-02

## README

### Develop
```
$ npm install
$ npm start
```

# Marionette.TemplateView

TemplateView is a development sandbox which offers template designers more
control over user experience outside of the core codebase. It is built around
the use of inline templates as a means of contextual and efficient prototyping.
In terms of working with Backbone/Marionette this extension is essentially
ItemView and CollectionView merged together with added functionality to drive
design workflow via inline templates.

## Example

##### Input
```
<html>
    <head>
        <title>TempalteView</title>
    </head>
    <body>
        <script type="text/javascript" src="vendor/jquery/dist/jquery.js"></script>
        <script type="text/javascript" src="vendor/underscore/underscore.js"></script>
        <script type="text/javascript" src="vendor/backbone/backbone.js"></script>
        <script type="text/javascript" src="vendor/backbone.marionette/lib/backbone.marionette.js"></script>
        <script type="text/javascript" src="vendor/morphdom/dist/morphdom-umd.js"></script>
        <script type="text/javascript" src="marionette.templateview.js"></script>

        <script type="text/template" data-append-to="body" data-child-append-to="& ul" id="collectionViewTemplate">
            <div class="container">
                <ul></ul>
            </div>
        </script>

        <script type="text/template" id="childViewTemplate">
            <li>
                <h3>Item: <%= title %></h3>
            </li>
        </script>

        <script type="text/template" data-insert-after="& h3" id="childSubViewTemplate">
            <p><%= desc %></p>
        </script>

        <script type="text/template" data-append-to="&" id="collectionSubViewTemplate">
            <div>
                <p>
                    Count: <b><%= collection.length %></b>
                </p>
            </div>
        </script>

        <script>

            var Model = Backbone.Model.extend();

            var Collection = Backbone.Collection.extend({
                  model: Model
            });

            var collection = new Collection([
                {title: 'test1', desc:"This is the first item."},
                {title: 'test2', desc:"This is the second item."}
            ]);

            var ChildSubView = Marionette.TemplateView.extend({
                template: "#childSubViewTemplate"
            });

            var ChildView = Marionette.TemplateView.extend({
                template: "#childViewTemplate",
                subViews: [ChildSubView]
            });

            var CollectionSubView = Marionette.TemplateView.extend({
                template: "#collectionSubViewTemplate"
            });

            var CollectionView = Marionette.TemplateView.extend({
                collection: collection,
                childView: ChildView,
                subViews: [CollectionSubView],
                template: "#collectionViewTemplate"
            });

            var collectionView = new CollectionView();

            collectionView.render();

        </script>

    </body>

</html>
```
##### Output
```
<html>
    <head>
        <title>TempalteView</title>
    </head>
    <body>
    	...
        <div class="container">
            <ul>
                <li>
                    <h3>Item: test1</h3>
                    <p>This is the first item.</p>
                </li>
                <li>
                    <h3>Item: test2</h3>
                    <p>This is the second item.</p>
                </li>
            </ul>
            <div>
                <p>
                    Count: <b>2</b>
                </p>
            </div>
        </div>
    </body>
</html>
```

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