- 授权协议: GPL
- 开发语言: JavaScript
- 操作系统: 跨平台
- 软件首页: https://github.com/kinogam/kino.razor
- 软件文档: http://www.kinogam.com/?p=575
- 官方下载: https://github.com/kinogam/kino.razor
软件介绍
kino.razor-一个javascript模版工具。简单易用，而且入门成本极低，对于熟悉asp.net mvc的razor模版的程序员更是0学习成本。
如何使用？
web页面使用时，只需要增加script标签引入:
<script src="kino.razor.js"></script> |
或者压缩版本：
<script src="kino.razor.min.js"></script> |
node.js 使用：
npm install razor |
node.js代码引用：
var razor = require("razor"); |
kino.razor第一个参数是”模版字符串“或者”模版函数“（模版函数后面会解释）
var str = kino.razor("Hey, @name!", { name: 'kino' }); //result: "Hey, kino!" |
当只传递了模版字符串时，结果将返回一个模版函数：
var r = kino.razor("hello!@name"); //type of r is function |
模版会自动把缺失的变量置空（这个是某些模版没有考虑到的）：
var templateStr = "Hey, @xxx"; var str = kino.razor(templateStr, {}); //result: "Hey, "
|
多次重复使用时，建议将模版函数保持起来，使用时，再把模版函数和数据当参数传入，以提高性能
var tf = kino.razor("hello!@name"); var str = kino.razor(tf, { name: 'kino' }); //result: "hello!kino"
|
以下是一些模版用法
脚本块
var templateStr = "@{var fname='kino';}this is @fname @lname"; var str = kino.razor(templateStr, {lname:'jack'}); //result: "this is kino jack"
|
使用条件判断
var templateStr = "@if(1==0){<span>if you see this word,your test is failed</span>}"; var str = kino.razor(templateStr, {}); //result: ""
|
循环
var templateStr = "@for(var i = 0; i < 3; i++){<span>@i</span>}"; var str = kino.razor(templateStr, {}); //result: "<span>0</span><span>1</span><span>2</span>" templateStr = "@{var i = 3;}@while(i--){<span>@i</span>}"; str = kino.razor(templateStr, {}); //result: "<span>2</span><span>1</span><span>0</span>"
|
使用 HtmlHelper.escape函数（可自己扩展kino.razor.HtmlHelper)
var templateStr = "<input yyy='@Html.escape(test)' xxx=\"@Html.escape(otherAttr)\" />"; var str = kino.razor(templateStr, { test: "kino's test", otherAttr: "\"one more test\"" }); //result: "<input yyy='kino's test' xxx=\""one more test"\" />"
|
@@转义为@
var templateStr = "{@name@@gmail.com}"; var str = kino.razor(templateStr, { name: 'kino' }); //result: '{kino@gmail.com}'
|
当在asp.net mvc3使用时，可以替换掉@符号，使用其他符号，例如 $ 代替
kino.razor.use("&"); var str = kino.razor("&name@&email", { name: "kinogam", email: "gmail.com" }); //"kinogam@gmail.com"
kino.razor.use("$"); var str = kino.razor("$name@$email", { name: "kinogam", email: "gmail.com" }); //"kinogam@gmail.com"
|
可以使用 @(name) 这种风格
var str = kino.razor("Hey, zz@(name)zz!", { name: 'kino' }); //result: "Hey, zzkinozz!"
|
当然我希望大家都能把模版放到页面上，以便代码和视图分离，比如：
<script type="text/template" id="temp_hello">
<div>
<span>hello @name!</span>
</div>
</script>
|
然后读取 document.getElementById(“temp_hello”).innerHTML
PS：假如大家也有玩github的话，欢迎fork我的项目，并pull request，同时有技术问题也可以发送邮件到我的邮箱kinogam@gmail.com,谢谢。
深入浅出Web设计（中文版）
（美）瓦特罗尔、（美）西罗托 / O'Reilly Taiwan公司 / 东南大学出版社 / 2010-11 / 99.00元
你将从《深入浅出Web设计(中文版)》学到什么？你曾经希望看看书就能学到真正的网站设计吗？曾经想过该如何同时达成让网站看起来美观，又能有效率地沟通信息，还要通过可访问性与可用性的策略吗？《深入浅出Web设计》正是精通上述主题的秘笈。我们将学到如何设计一个绝佳、用户友好的网站，上谈客户需求，下说手绘分镜表，乃至完成在线所需的HTML与css主文件……而且会有一个真正可以运作的网站！一起来看看 《深入浅出Web设计（中文版）》 这本书的介绍吧!
