javascript模版工具 kino.razor

码农软件 · 软件分类 · 模板引擎 · 2019-08-23 22:14:18

软件介绍

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&#x27;s test' xxx=\"&quot;one more test&quot;\" />"

@@转义为@

    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,谢谢。


本文地址:https://www.codercto.com/soft/d/13029.html

疯狂科学家大本营

疯狂科学家大本营

Bei Er Fei Ao Er / 本书翻译组 译、黄晓庆 周宇煜 张为民 审译 / Science Press / 2012-1-5 / 48.00元

美国最棒的创意工场不是贝尔实验室,不是硅谷,也不是麻省理工学院的媒体实验室,而是由五角大楼领导的绝密军事机构DARPA——国防高级研究计划局。DARPA是由美国前总统艾森豪威尔建立的军事部门,创建的目的是为了回应苏联的太空计划。 虽然DARPA属于政府机构,但是没有冷冰 冰的氛围和官僚做派,那里的科学家偏爱牛仔裤和运动鞋。不过他们最爱的还是在各个领域寻找颠覆性创意。从航空航天、IT,到能源领......一起来看看 《疯狂科学家大本营》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

MD5 加密
MD5 加密

MD5 加密工具

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换