TemplateView

What?

TemplateView is an extension of Backbone's View class, and is inspired by Marionette and React. It aims to enable you to build a Flux style architechture with Backbone's core components. Essentially you create a tree of View+Template combos and render the entire tree each time the data's state changes. This offers the opportunity to design schemas that work really well with templates and keep views small.

The extension aims to offer template designers more control over user experience while staying outside of the core codebase. It is built around the use of inline templates as a means of efficient prototyping. The default template engine is Nunjucks, which offers a great sandbox with just enough logic to set up the various UI states that an app may require.

Much like how React works with a virtual dom to allow for this, TemplateView works with morphdom to accomplish DOM diffing.

Usage

Example

You can find the TodoMVC style example here, and have a look at the code.

Views

TemplateView requires pairity between Views and Templates, where each View must be associated with a unique Template. Each extended View can be passed to another one as ChildView, or as part of the SubViews array. The top most contructed View is known as the ancestorView and is reposible for constructing and rendering all of it's decendents. A ChildView is a single extended Class that is acted upon when a contructed collection is also passed to it's parentView as a constructor option. Each item in the collection is contrcuted a ChildView, and the appropriate model is passed into the Template context. Each extended SubView Class is passed as part of an array, and each item in the array is contructed a View and rendered appropriately. Each View contructor must also be passed a template selector string to find the Template in the DOM.

Data

If any View is passed a constructed model as a contructor option, it's data will automatically become a part of the Template context. Any changes to the state of that data will trigger a full render of the tree. Subsiquently any changes to the state of a collection will trigger a render as well. The ancestor View can be passed a unique constructed model known as the state. This data will be extended into every Template context within the tree and changes to it will also trigger a new tree render. Additionally each View can be passed a templateContext constructor option as a function which returns dynamic data to the Template context. If any View is not passed a model option then it will take on the model option of it's parent if available.

Templates

Templates must be available in the DOM as script tags. Each template script tag must have a data attriube which describes where it should be attached to the DOM as rendering occurs. The data attributes are mapped to jquery's appendTo, prependTo, insertAfter, and insertBefore in the format of data-append-to, data-prepend-to, data-insert-after, and data-insert-before. Much like React each Template must contain a single enclosed DOM element. All templates are parsed with the help of Nunjucks. Nunjucks is a nicely sandboxed template engine that is also known as Jinja and Twig in the Python and PHP communities respectively.

Install

$ bower install templateview

or

$ npm install templateview

Develop

$ npm install
$ npm start
$ npm run vendor

What's next? (How can I help?)

The current release (v0) is all about enabling the concept with familiar patterns. The next release (v1) will be about moving more control to the Template and simplifying the View even more. This will involve things like iterating collections and building Views.

Conversation and contributions are very welcome! If you've tried out the current version and have feedback then make an issue. Don't worry about duplicates or whatever, just go for it!