/*jshint esnext:true */
/*jshint esnext:true */
This is a re-write of the Backbone TodoMVC app using ECMAScript 6 features and the Angular 2.0 dependency injection framework. It’s made possible using Traceur compiler and was authored by Addy Osmani, Pascal Hartig, Sindre Sorhus, Stephen Sawchuk, Rick Waldron, Domenic Denicola and Guy Bedford. Dependency injection features added by Tero Parviainen.
You can run the completed app, watch the project repository or look at the original ES5 implementation.
We first import the di.js Injector, which we can use to launch the application.
We can do this with the import
keyword.
import {Injector} from './di/injector';
We then import the classes we defined in the TodoApp module.
import {AppView, Filters, createItemTemplate} from './todo-app';
We also import the whole templates module to a local variable.
module templateModule from './templates';
Load the application once the DOM is ready, using jQuery.ready
() => { ... }
which you’ll see below is the statement form of
the arrow function syntax. Practically speaking, it is lightweight
sugar for function () { ... }.bind(this)
.
Apart from containing statements instead of an automatically-returned expression, it has the same properties as the expression-form arrow functions we talked about above.
$(() => {
We create a di.js Injector which will hold all of our managed application components. It gets a reference to the template module, and will register all the exported variables from it.
var injector = new Injector([templateModule]);
Finally, we kick things off by creating the App.
We use the injector to instantiate an AppView
and a Filters
instance.
We then kick off the Backbone router.
injector.get(AppView);
injector.get(Filters);
Backbone.history.start();
});