SuperPlan(4)TaoBao Winner - UI - SSI Prototype and Underscore
SuperPlan(4)TaoBao Winner - UI - SSI Prototype and Underscore
6. SSI
6.1 Make Apache2 Working
check the version of apache on my local
>sudo apachectl -v
Start the server
>sudo apachectl start
We can visit the pages in /Library/WebServer/Documents
All the configuration files are in /etc/apache2/
Enable the include module
>vi /etc/apache2/httpd.conf
Find the line as follow, and make sure it is not commented.
LoadModule include_module libexec/apache2/mod_include.so
#<Directory "/Library/WebServer/Documents">
# Options Indexes FollowSymLinks MultiViews
# AllowOverride None
# Order allow,deny
# Allow from all
#</Directory>
<Directory "/Library/WebServer/Documents">
Options Indexes FollowSymLinks MultiViews +Includes
AllowOverride None
Order allow,deny
Allow from all
AddType text/html .shtml
AddOutputFilter INCLUDES .shtml
AddType text/html .html
AddOutputFilter INCLUDES .html
</Directory>
Make the shtml go with the SSI.
Once I add html to the configuration. The html file no need to be .shtml, it can also be .html.
The sample files should be desk.html, env.html, footer.html, header.html
<html]]>
<head]]>
<title]]>Desk</title]]>
</head]]>
<body]]>
<!--#include virtual="commons/env.html" -->
Hello, <!--#echo var="name" -->
<!--#include virtual="commons/header.html" -->
This is the body<br/>
<!--#include virtual="commons/footer.html" -->
</body]]>
</html]]>
<!--#set var="name" value="sillycat" -->
This is header<br/>
This is footer<br/>
7. JavaScript Prototype
Every class in javascript has its prototype. For example, we can add method trim to String
String.prototype.trim = function() {
return this.replace(/(^\s*)|(\s*$)/g, "");
}
Or, we can add method via prototype to our customized class.
function Circle(x, y, r){
this.x = x;
this.y = y;
this.r = r;
//this.prototype = null;
}
Circle.prototype.area = function(){
return this.r*this.r * 3.14159;
}
var circ = new Circle(0,0,2);
alert(circa.area());
Not only the method function, we can also give property via prototype.
Circle.prototype.desn = "This can be the comments on that class."
8. underscore
One example to show the template
<html>
<head>
<meta charset="utf-8"/>
<title>Underscore</title>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="format-detection" content="telephone=no"/>
<link href="./stylesheets/underscore.css" rel="stylesheet" type="text/css"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.2/underscore-min.js"></script>
</head>
<body>
</body>
</html>
<script id="t2" type="text/template">
<%_.each(datas, function(item) {%>
<div class="outer">
<div class="title">
<span ><%=item.film%></span>
</div>
<ul class="ul">
<li>
<a href="<%=item.url%>">【<%=item.title%>】</a>
</li>
</ul>
</div>
<%});%>
</script>
<!--Data -->
<script>
var datas = [
{
title: "1942",
url: "http://sillycat.iteye.com",
film:"film1"
},
{
title: "Pai",
url: "http://sillycat.iteye.com",
film:"film2"
}
];
$("body").html( _.template($("#t2").html(), datas));
</script>
https://github.com/documentcloud/underscore/
http://underscorejs.org/
In the sample, it only shows the template function.
http://underscorejs.org/#template
9. Backbone
come soon
References:
SSI
http://sillycat.iteye.com/blog/1075378
Apache on MAC
http://sillycat.iteye.com/blog/1638638
http://www.ssi.su/
http://httpd.apache.org/docs/2.2/howto/ssi.html
BackBone
http://dailyjs.com/2012/11/29/backbone-tutorial-1/
http://www.youtube.com/watch?v=HsEw2i4wQMM
https://github.com/thomasdavis/backbonetutorials/tree/gh-pages/videos/beginner
http://backbonejs.org/#introduction
http://coenraets.org/blog/2012/02/sample-app-with-backbone-js-and-twitter-bootstrap/
6. SSI
6.1 Make Apache2 Working
check the version of apache on my local
>sudo apachectl -v
Start the server
>sudo apachectl start
We can visit the pages in /Library/WebServer/Documents
All the configuration files are in /etc/apache2/
Enable the include module
>vi /etc/apache2/httpd.conf
Find the line as follow, and make sure it is not commented.
LoadModule include_module libexec/apache2/mod_include.so
#<Directory "/Library/WebServer/Documents">
# Options Indexes FollowSymLinks MultiViews
# AllowOverride None
# Order allow,deny
# Allow from all
#</Directory>
<Directory "/Library/WebServer/Documents">
Options Indexes FollowSymLinks MultiViews +Includes
AllowOverride None
Order allow,deny
Allow from all
AddType text/html .shtml
AddOutputFilter INCLUDES .shtml
AddType text/html .html
AddOutputFilter INCLUDES .html
</Directory>
Make the shtml go with the SSI.
Once I add html to the configuration. The html file no need to be .shtml, it can also be .html.
The sample files should be desk.html, env.html, footer.html, header.html
<html]]>
<head]]>
<title]]>Desk</title]]>
</head]]>
<body]]>
<!--#include virtual="commons/env.html" -->
Hello, <!--#echo var="name" -->
<!--#include virtual="commons/header.html" -->
This is the body<br/>
<!--#include virtual="commons/footer.html" -->
</body]]>
</html]]>
<!--#set var="name" value="sillycat" -->
This is header<br/>
This is footer<br/>
7. JavaScript Prototype
Every class in javascript has its prototype. For example, we can add method trim to String
String.prototype.trim = function() {
return this.replace(/(^\s*)|(\s*$)/g, "");
}
Or, we can add method via prototype to our customized class.
function Circle(x, y, r){
this.x = x;
this.y = y;
this.r = r;
//this.prototype = null;
}
Circle.prototype.area = function(){
return this.r*this.r * 3.14159;
}
var circ = new Circle(0,0,2);
alert(circa.area());
Not only the method function, we can also give property via prototype.
Circle.prototype.desn = "This can be the comments on that class."
8. underscore
One example to show the template
<html>
<head>
<meta charset="utf-8"/>
<title>Underscore</title>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="format-detection" content="telephone=no"/>
<link href="./stylesheets/underscore.css" rel="stylesheet" type="text/css"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.2/underscore-min.js"></script>
</head>
<body>
</body>
</html>
<script id="t2" type="text/template">
<%_.each(datas, function(item) {%>
<div class="outer">
<div class="title">
<span ><%=item.film%></span>
</div>
<ul class="ul">
<li>
<a href="<%=item.url%>">【<%=item.title%>】</a>
</li>
</ul>
</div>
<%});%>
</script>
<!--Data -->
<script>
var datas = [
{
title: "1942",
url: "http://sillycat.iteye.com",
film:"film1"
},
{
title: "Pai",
url: "http://sillycat.iteye.com",
film:"film2"
}
];
$("body").html( _.template($("#t2").html(), datas));
</script>
https://github.com/documentcloud/underscore/
http://underscorejs.org/
In the sample, it only shows the template function.
http://underscorejs.org/#template
9. Backbone
come soon
References:
SSI
http://sillycat.iteye.com/blog/1075378
Apache on MAC
http://sillycat.iteye.com/blog/1638638
http://www.ssi.su/
http://httpd.apache.org/docs/2.2/howto/ssi.html
BackBone
http://dailyjs.com/2012/11/29/backbone-tutorial-1/
http://www.youtube.com/watch?v=HsEw2i4wQMM
https://github.com/thomasdavis/backbonetutorials/tree/gh-pages/videos/beginner
http://backbonejs.org/#introduction
http://coenraets.org/blog/2012/02/sample-app-with-backbone-js-and-twitter-bootstrap/