5th - text plugin

jelz · Sep 24, 2013 · 07c72bc · 07c72bc
1 parent af3b337
commit 07c72bc
Show file tree

Hide file tree

Showing 9 changed files with 116 additions and 6 deletions.
diff --git a/05-text/app/main-view.js b/05-text/app/main-view.js
@@ -0,0 +1,22 @@
+define(function (require) {
+ var $ = require('jquery'),
+ t = require('template-cache');
+
+ var menu = ['About us', 'Offer', 'Contact'];
+
+ var products = [
+ { name: 'RequireJS', desc: 'Best AMD loader ever' },
+ { name: 'r.js', desc: 'Best AMD optimizer ever' },
+ { name: 'Almond', desc: 'AMD loader for production use' }
+ ]; 
+
+ return {
+ appendToBody: function () {
+ $('body').append(t('layout')());
+ $('.header').append(t('header')());
+ $('.footer').append(t('footer')());
+ $('.sidebar').append(t('menu')({ menu: menu }));
+ $('.content').append(t('content')({ products: products }));
+ }
+ }; 
+});
diff --git a/05-text/app/main.js b/05-text/app/main.js
@@ -1,5 +1,13 @@
-require.config({});
+require.config({
+ paths: {
+ underscore: '../bower_components/underscore-amd/underscore',
+ jquery: '../bower_components/jquery/jquery',
+ text: '../bower_components/requirejs-text/text'
+ }
+});
 
-require([], function () {
- console.log('ready');
+require(['jquery', 'main-view'], function ($, mainView) {
+ $(function () {
+ mainView.appendToBody();
+ });
 });
diff --git a/05-text/app/template-cache.js b/05-text/app/template-cache.js
@@ -0,0 +1,29 @@
+define(function (require) {
+ var $ = require('jquery'),
+ _ = require('underscore'),
+ $body = $('body'),
+ cache = {},
+ prefix = 'template-';
+
+ var templates = [
+ require('text!tpl/layout.html'),
+ require('text!tpl/content.html'),
+ require('text!tpl/menu.html')
+ ];
+
+ _.each(templates, function (markup) {
+ $(markup).appendTo($body);
+ });
+
+ return function (key) {
+ var cacheKey = prefix + key,
+ template = cache[cacheKey];
+
+ if (!template) {
+ template = _.template($('#' + cacheKey).html());
+ cache[cacheKey] = template;
+ }
+
+ return template;
+ };
+});
diff --git a/05-text/app/tpl/content.html b/05-text/app/tpl/content.html
@@ -0,0 +1,9 @@
+<script id="template-content" type="text/template">
+ <h4>Our products:</h4>
+ <% _.each(products, function (p) { %>
+ <div>
+ <p><strong><%= p.name %></strong></p>
+ <p><%= p.desc %></p>
+ </div>
+ <% }) %>
+</script>
diff --git a/05-text/app/tpl/layout.html b/05-text/app/tpl/layout.html
@@ -0,0 +1,17 @@
+<script id="template-layout" type="text/template">
+ <div class="container">
+ <div class="header"></div>
+ <div class="sidebar"></div>
+ <div class="content"></div>
+ <div class="footer"></div>
+ </div>
+</script>
+
+<script id="template-header" type="text/template">
+ <h2>Welcome to AMD inc</h2>
+ <h3>Some catchy line!</h3>
+</script>
+
+<script id="template-footer" type="text/template">
+ <p>Copyright &copy; 2013</p>
+</script>
diff --git a/05-text/app/tpl/menu.html b/05-text/app/tpl/menu.html
@@ -0,0 +1,8 @@
+<script id="template-menu" type="text/template">
+ <h4>Main menu:</h4>
+ <ul>
+ <% _.each(menu, function (item) { %>
+ <li><%= item %>
+ <% }) %>
+ </ul>
+</script>
diff --git a/05-text/bower.json b/05-text/bower.json
@@ -15,6 +15,9 @@
  "tests"
  ],
  "dependencies": {
- "requirejs": "~2.1.8"
+ "requirejs": "~2.1.8",
+ "underscore-amd": "~1.5.2",
+ "jquery": "~2.0.3",
+ "requirejs-text": "~2.0.10"
  }
 }
diff --git a/05-text/index.html b/05-text/index.html
@@ -3,6 +3,13 @@
  <head>
  <meta charset="utf-8">
  <title>05 text!</title>
+ <style type="text/css">
+ .container { width: 800px; margin: 10px auto; }
+ .header, .footer { clear: both; padding: 10px; border: 1px dashed lightgrey; }
+ .sidebar, .content { padding: 10px; border: 1px dashed lightgreen; }
+ .sidebar { float: left; width: 200px; }
+ .content { margin-left: 240px; }
+ </style>
  </head>
  <body>
  <h1>05 text!</h1>

diff --git a/README.md b/README.md
@@ -1,10 +1,17 @@
 ## 10 things about [AMD](https://requirejs.org/docs/whyamd.html)
 
+### TOC
+
 1. __Simplified CommonJS Wrapper__ - don't maintain long list of dependencies
-2. __Cajon__ - get rid of wrapper at all
-3. __Circular Dependencies__ - avoid, detect and live with
+2. __Cajon__ - get rid of module wrapper at all
+3. __Circular Dependencies__ - avoid, detect and live with those
 4. __Almond__ - don't keep XHR loading code when in production
 5. __text!__ - don't store all your templates in one template überfile (applies to any other text resource, too)
+6. __i18n!__ - localize JS apps right way (todo)
+7. __jQuery__ - use jquery in an AMD manner (todo)
+8. __Bootstrap__ - customize your libraries with no effort (applies to many other libs, too) (todo)
+9. __Packages__ - find best place for every piece of code (todo)
+10. __browserify__ - know alternative (todo)
 
 As you can see: work is in progress :)