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.
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
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.
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
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 must be available in the DOM as
script tags. Each template
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
insertBefore in the format of
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.
$ bower install templateview
$ npm install templateview
$ npm install $ npm run vendor $ npm start
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!