forked from arcturo/library
/
04_applications.html
131 lines (106 loc) · 3.28 KB
/
04_applications.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>CoffeeScript</title>
<link rel="stylesheet" href="site/site.css" type="text/css" charset="utf-8">
<link rel="stylesheet" href="site/highlight.css" type="text/css" charset="utf-8">
<script src="site/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="site/highlight.js" type="text/javascript" charset="utf-8"></script>
<script src="site/coffee-script.js" type="text/javascript" charset="utf-8"></script>
<script src="site/preview.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
hljs.initHighlightingOnLoad();
</script>
</head>
<body>
<div id="container">
<header>
<h1><a href="index.html">The Little Book on CoffeeScript</a></h1>
</header>
<div id="content">
<div class="back"><a href="index.html">« Back to all chapters</a></div>
<h1>Creating Applications</h1>
<p>intro</p>
<h2>Structure & CommonJS</h2>
<h2>Stitch it up</h2>
<h2>JavaScript templates</h2>
<p>Stitch</p>
<p>eco
tmpl</p>
<p>Backbone/Spine</p>
<p><span class="noconvert"></span></p>
<pre><code>app/controllers
app/views
app/models
app/lib
lib
public
public/index.html
public/css
public/css/views
</code></pre>
<p><span class="noconvert"></span></p>
<pre><code>npm install stitch
</code></pre>
<p><span class="noconvert"></span></p>
<pre><code>#!/usr/bin/env node
var stitch = require('stitch'),
express = require('express'),
util = require('util'),
argv = process.argv.slice(2);
var package = stitch.createPackage({
paths: [__dirname + '/lib', __dirname + '/app'],
dependencies: [
__dirname + '/lib/json2.js',
__dirname + '/lib/shim.js',
__dirname + '/lib/jquery.js',
__dirname + '/lib/jquery.tmpl.js',
__dirname + '/lib/spine.tmpl.js',
__dirname + '/lib/spine.js'
]
});
var app = express.createServer();
app.configure(function() {
app.set('views', __dirname + '/views');
app.use(express.compiler({ src: __dirname + '/public', enable: ['less'] }));
app.use(app.router);
app.use(express.static(__dirname + '/public'));
app.get('/application.js', package.createServer());
});
var port = argv[0] || 9294;
util.puts("Starting server on port: " + port);
app.listen(port);
</code></pre>
<p><span class="noconvert"></span></p>
<pre><code>stitch.compilers.tmpl = function(module, filename) {
var content = fs.readFileSync(filename, 'utf8');
content = ["var template = jQuery.template(", JSON.stringify(content), ");",
"module.exports = (function(data){ return jQuery.tmpl(template, data); });\n"].join("");
return module._compile(content, filename);
};
</code></pre>
<p><span class="noconvert"></span></p>
<pre><code><!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Application</title>
<link rel="stylesheet" href="/css/application.css" type="text/css" charset="utf-8">
<script src="/application.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
var exports = this;
jQuery(function(){
var App = require("app");
exports.App = App.init({el: $("body")});
});
</script>
</head>
<body>
</body>
</html>
</code></pre>
</div>
</div>
</body>
</html>