Permalink
Browse files

003 - HelloWorld - Model

prompt for user's name
sets up a model with this data
compile a template with the model
render the compiled template
  • Loading branch information...
1 parent 4be215b commit 0d9ce0cc01c6487878bb58ca92a2b9285a639ce5 @marcopeg committed Jun 16, 2012
View
BIN .DS_Store
Binary file not shown.
@@ -48,7 +48,7 @@ require.config({
/**
* This is the main module of our app.
- * It depends boot on libraries (jquery) and app's related sub-modules (view and template)
+ * It depends on app's related sub-modules (view and template)
*
* "view/hello_world"
* this dependecy is solved usind the config::paths "view" key to load "js/views/hello_world.js" file
@@ -63,8 +63,8 @@ require.config({
* NOTE: "templates/hello_worls.html" path refers to the config::baseUrl.
*
*/
-define(['jquery','view/hello_world','text!templates/hello_world.html'],function($,View,Template){
+define(['view/hello_world_view','text!templates/hello_world.html'],function(HelloWorldView,Template){
- View.render( Template );
+ HelloWorldView.render( Template );
});
@@ -1,5 +1,5 @@
---------------------------------------
- Learning Backbon - 001 - HelloApp
+ Learning Backbon - 002 - HelloApp - View
---------------------------------------
-In this simple example I set up a page to load some javascript logic who depends on jQuery.
+In this example I use a Backbone's View to render the HelloWorld message.
Binary file not shown.
@@ -0,0 +1,16 @@
+/**
+ * Learning Backbone
+ * -> Hello World View
+ *
+ * @author: MPeg [marco(dot)pegoraro(at)gmail(dot)com]
+ */
+
+
+html, body {
+
+ background: #eee;
+ font-family: monospace;
+ text-shadow: 0 1px 0 #fff;
+ text-align: center;
+
+}
@@ -0,0 +1,26 @@
+<!doctype html>
+<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
+<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
+<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
+<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
+<head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+
+ <title>Backbone / Hello World / Model App</title>
+ <meta name="viewport" content="width=device-width,initial-scale=1">
+ <meta name="description" content="Peg Test App">
+
+ <!-- CSS -->
+ <link rel="stylesheet" type="text/css" href="css/style.css">
+
+ <!-- RequireJS -->
+ <script data-main="js/bootstrap" src="../_libs/require.js"></script>
+
+</head>
+<body>
+
+ <div id="app"></div>
+
+</body>
+</html>
@@ -0,0 +1,105 @@
+/**
+ * Learning Backbone
+ * -> Hello World Model
+ *
+ * @author: MPeg [marco(dot)pegoraro(at)gmail(dot)com]
+ */
+
+
+
+
+
+/**
+ * This example extends the 001{HelloWorld} configuration adding a rule
+ * for the new "models" folder.
+ *
+ * Models are the Backbone way to handle data structure leafs.
+ *
+ */
+require.config({
+
+ baseUrl: './',
+
+ paths: {
+
+ // Libraries
+ text: '../_libs/text',
+ jquery: '../_libs/jquery',
+ underscore: '../_libs/underscore',
+ backbone: '../_libs/backbone',
+
+ // Application Places
+ view: 'js/views',
+ model: 'js/models',
+ plugin: 'js/plugins'
+
+ }
+
+});
+
+
+
+/**
+ * This is the main module of our app.
+ *
+ * This logic code uses:
+ * - a Backbone Model (UserModel)
+ * - a Backbone View (HelloWorldView)
+ * - a text template loaded via Ajax
+ *
+ * The flow is:
+ * - ask user for it's name
+ * - set this information into a UserModel instance
+ * - compile the template with the model's data
+ * - render the View
+ *
+ *
+ * NOTE ABOUT CODING:
+ * while your app grows up your AMD may depends on so much things and write them in a single row
+ * became difficult to read!
+ * In this file i use a vertical list of dependencies and internal objects to enhance core readability.
+ *
+ */
+
+// Dependencies Requests
+define([
+ 'model/user_model',
+ 'view/hello_world_view',
+ 'text!templates/hello_world.html'
+
+// Dependencies Objects
+],function(
+ UserModel,
+ HelloWorldView,
+ Template
+
+// Main Module Logic
+){
+
+ // Ask user for its name
+ var username = prompt('Please insert your name:');
+
+ // Setup the user instance with the username prompted by the user!
+ var userModelInstance = new UserModel({
+
+ name: username
+
+ });
+
+ // Compile the template with user's data.
+ // This is an Underscore stuff. (http://underscorejs.org/#template)
+ //
+ // The second parameter passed is the DATA object.
+ // Underscore fetch dynamic data from this store.
+ //
+ // We need to reference objects with the "name" used in our template!!
+ var CompiledTemplate = _.template(Template,{
+
+ user: userModelInstance
+
+ });
+
+ // Just render the view.
+ HelloWorldView.render( CompiledTemplate );
+
+});
@@ -0,0 +1,29 @@
+/**
+ * Learning Backbone
+ * -> Hello World Model
+ *
+ * @author: MPeg [marco(dot)pegoraro(at)gmail(dot)com]
+ *
+ *
+ * This module define a custom model.
+ * A model is the Backbone way to handle data.
+ *
+ */
+
+
+
+define(['backbone'],function(Backbone){
+
+ var UserModel = Backbone.Model.extend({
+
+ defaults: {
+
+ name: 'Unknown User'
+
+ }
+
+ });
+
+ return UserModel;
+
+});
@@ -0,0 +1,69 @@
+/**
+ * Conditional AMD Coding for a jQuery Plugin
+ *
+ * This simple yet funny jQuery plugin center vertically and bounce a DOM node.
+ * I use it in my "Hello World" examples.
+ *
+ * This file explain how to pack a jQuery plugin to be ready as AMD module.
+ * This way the plugin itself can be loaded as dependency in your application define() blocks!
+ */
+
+
+
+
+
+/**
+ * Decide HOW to expose the plugin to the world.
+ * - as AMD module with jquery dependency
+ * - as global "jQuery" variable extension
+ */
+(function (factory) {
+
+ if (typeof define === 'function' && define.amd) {
+ // AMD. Register as an anonymous module.
+ define(['jquery'], factory);
+ } else {
+ // Browser globals
+ factory(jQuery);
+ }
+
+
+
+
+/**
+ * Code the plugin itself and pass it to the above conditional code.
+ * Inside this block we can use "$" to refer to jQuery.
+ *
+ * "$" will be setted up by the AMD define() or directly with the jQuery global object.
+ */
+}(function($) {
+
+
+ $.fn.centerBounce = function() {
+
+ $(this).each(function(){
+
+ var $this = $(this);
+
+ // Center text vertically:
+ $this.css({
+ paddingTop: $(window).height()/2 - $this.outerHeight()/2,
+ textAlign: 'center',
+ marginLeft: 'auto',
+ marginRight: 'auto'
+ });
+
+ // Bounce text:
+ $this
+ .animate({ fontSize: '40pt' },1000)
+ .animate({ fontSize: '10pt' },1000)
+ ;
+
+ });
+
+ return this;
+
+ };
+
+
+}));
@@ -0,0 +1,35 @@
+/**
+ * Learning Backbone
+ * -> Hello World Model
+ *
+ * @author: MPeg [marco(dot)pegoraro(at)gmail(dot)com]
+ *
+ *
+ * This module define a custom view obtained by extending Backbone's core View object.
+ * (nothing changed from the example 002)
+ *
+ */
+
+
+define(['jquery','backbone','plugin/jquery.centerBounce'],function($,Backbone){
+
+ var HelloWorldView = Backbone.View.extend({
+
+ // Sets up DOM element handled by this view
+ el: $('#app'),
+
+ render: function( template ) {
+
+ // Add the template text to the DOM
+ $(this.el).html(template);
+
+ // Apply a funny jQuery plugin!
+ $('body').centerBounce();
+
+ }
+
+ });
+
+ return new HelloWorldView;
+
+});
@@ -0,0 +1,6 @@
+---------------------------------------
+ Learning Backbon - 002 - HelloWorldApp - Model
+---------------------------------------
+
+This example prompt the user for it's name and sets up a Backbone model to display it in the
+bouncing text message.
@@ -0,0 +1 @@
+... hi <strong><%= user.get("name") %></strong>! ...

0 comments on commit 0d9ce0c

Please sign in to comment.