SuperPlan(4)TaoBao Winner - UI - SSI Prototype and Underscore-优快云博客

本文详细介绍了如何在 Apache 服务器上配置和使用 Server Side Includes (SSI)，并展示了如何通过 JavaScript 和 Underscore.js 实现动态网页内容的生成。此外，还提供了 Backbone.js 的简介及资源链接。

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]]>

Hello, 

This is the body<br/>

</body]]>

</html]]>



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>


<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/