`
sillycat
  • 浏览: 2537878 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

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/


分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics