Asynchronous Module Definition (AMD)
As with any MVC architecture, the folder structure is important and will be the foundation of our MVC pattern. This is how I decided to organize the structure:
Yes, that’s Sublime Text 2
This is RequireJS saying that my initial code is in ~/scripts/main.js. The module main.js defines some shortcuts to libraries and also initializes the router.
CanJS is used to create the router as so:
What a beautiful sight. Routes are cleanly mapped to controller and actions. The controller is just as nice:
Notice that DOM events are declared here in the controller. No more polluting your code with jQuery binding. Also the model is brought in as a dependency. The REST services are called in the underlying model, then the result is passed into the view.
The view is a template that allows binding of data. This is how the view looks like:
As you can see, the bindings are happening between the <% CODE %> magic tags. I am also using MomentJS to format the date. This dependency is declared in the controller which is why I can use it in the template. Otherwise, the view would not know what “moment” is. Another things worth mentioning in the view is that I am storing the model data in the “li” element with this line:
Latest posts by Guest Posts (see all)
- Falafel Featured on Moving America Forward hosted by William Shatner - June 28, 2015
- Xamarin: Apple Watch Talking to Parent App - June 24, 2015
- IoT – Top Down - June 23, 2015
- Xamarin: Parsing a CSV File From the Net - June 22, 2015
- Reading CSV Files In Xamarin Forms - June 19, 2015