Commit 0e2547b5 authored by Ryan Eastridge's avatar Ryan Eastridge

add README files and update require example to use explicit references instead...

add README files and update require example to use explicit references instead of using Thorax registry
parent d132997d
Thorax TodoMVC
==============
This is a modified version of the Backbone TodoMVC app that uses [Thorax](http://thoraxjs.org).
The Backbone implementation has code to manage the list items which are present on the page. Thorax provides collection bindings with the `collection` helper, which eleminate the need for most of this code:
{{#collection todosCollection filter="filterTodoItem"
item-view="todo-item" tag="ul" id="todo-list"}}
`todosCollection` was specified in js/views/app.js:initialize, all instance variables of the view are automatically made available to the associated template. The `item-view` attribute is optional for collections, but specified here since we want to initialize an `todo-item` view for each item. This class is defined in js/views/todo-item.js and is referenced here by it's `name` attribute which is defined in that file.
The `filter` attribute specifies a function to be called for each model in the collection and hide or show that item depending on wether the function returns true or false. It is called when the collection is first rendered, then as models are added or a model fires a change event. If a `filter` event is triggered on the collection (which it is in routers/router.js:setFilter) it will force the collection to re-filter each model in the colleciton.
In this implementation the `stats` view has it's own view class and is re-rendered instead of the `app` view being re-rendered. Thorax provides the ability to embed views by name or reference with the `view` helper:
{{view "stats"}}
\ No newline at end of file
Thorax + Lumbar TodoMVC Example
===============================
Thorax + Lumbar TodoMVC
=======================
This example uses [Thorax](http://thoraxjs.org) and [Lumbar](http://walmartlabs.github.com/lumbar). The compiled JavaScript is included in the repo, to re-build the files run:
......
Thorax + RequireJS TodoMVC
==========================
Unlike the vanilla Thorax and Thorax + Lumbar implementations, this example does not make use of the Thorax registry / named views and templates. The views are still assigned a name property for debugging and consistency (each view's element will be assigned a data-view-name HTML attribute), but each dependency is explicitly pulled in via `define` instead of being pulled in by the `view` or `template` helpers, or automatic assignment of templates to views when they share a name. For example in the require.js app:
# views/app.js
template: Handlebars.compile(appTemplate),
initialize: function() {
this.statsView = new StatsView;
}
# templates/app.handlebars
{{view statsView}}
In the Lumbar or vanilla Thorax implementations simply setting the name will auto assign the template of the same name, and the "stats" view can be included by name, rather than having to first initialize it.
# views/app.js
name: 'app'
# templates/app.handlebars
{{view "stats"}}
Thorax is flexible enough that the approach used in the require.js app will still work within lumbar or vanilla Thorax implementations, but the approach used in the require.js environment is the only one that will work with require.js
\ No newline at end of file
......@@ -7,7 +7,7 @@
<section id="main">
<input id="toggle-all" type="checkbox">
<label for="toggle-all">Mark all as complete</label>
{{#collection todosCollection filter="filterTodoItem" item-view="todo-item" tag="ul" id="todo-list"}}
{{#collection todosCollection filter="filterTodoItem" item-view=todoItemView tag="ul" id="todo-list"}}
<div class="view">
<input class="toggle" type="checkbox" {{#if completed}}checked{{/if}}>
<label>{{title}}</label>
......@@ -16,7 +16,7 @@
<input class="edit" value="{{title}}">
{{/collection}}
</section>
{{view "stats" tag="footer" id="footer"}}
{{view statsView}}
{{/empty}}
</section>
<div id="info">
......
......@@ -10,9 +10,6 @@ define([
'common'
], function( $, _, Backbone, Thorax, Todos, TodoItemView, StatsView, appTemplate, Common ) {
// TodoView & StatsView needs to be included in "define"
// as it will be initialized by this view
return Thorax.View.extend({
// In a require.js application the name is primarily for
// consistency and debugging purposes
......@@ -38,6 +35,8 @@ define([
// global Todos collection available to the template.
// Load any preexisting todos that might be saved in *localStorage*.
initialize: function() {
this.todoItemView = TodoItemView;
this.statsView = new StatsView;
this.todosCollection = Todos;
this.todosCollection.fetch();
this.render();
......
......@@ -10,6 +10,10 @@ define([
return Thorax.View.extend({
name: 'stats',
tagName: 'footer',
id: 'footer',
template: Handlebars.compile(statsTemplate),
events: {
......
......@@ -6,14 +6,16 @@ define([
'common'
], function( $, _, Backbone, Common ) {
// This view has no template assigned in the class definition
// as it will recieve the capture block from the collection
// helper in templates/app.handlebars as it's template
return Thorax.View.extend({
name: 'todo-item',
//... is a list tag.
tagName: 'li',
// Cache the template function for a single item.
name: 'todo-item',
// The DOM events specific to an item.
events: {
'click .toggle': 'toggleCompleted',
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment