模板库razor-tmpl - CNode技术社区

JS的模板库已经多到装不下了,但还是自己造个好玩,指哪打哪...

razor-tmpl,刚开始代码抄kino.razor ... 慢慢改,已经面目全非了...

Github : https://github.com/magicdawn/razor-tmpl npm : https://www.npmjs.org/package/razor-tmpl js 文件 : https://rawgit.com/magicdawn/razor-tmpl/master/razor-tmpl.js

@{ blabla }代码块 @( variable or expression )输出变量 @(- data) escape @for(xxx) ...

模板支持 所有 像 for(){ ... } while( ...) { } if(...){ ... } try{ ... } catch(e){ ... } 这种代码

[@for](/user/for)(var i in ViewBag.list){
 <div>@(ViewBag.list[i].name)</div>
}

<div>
 <script type="text/template" id="test">
 [@each](/user/each)(person in ViewBag.list){
 <div data-name="@(person.name)">
 @ if(person.age > 30){
 这么大了啊~
 }
 @ else if(person.age > 18)
 {
 哎哟,不错哟,成年了
 }
 @ else
 {
 小屁孩,哈哈
 }
 </div>
 }
 </script>
 </div>

$(function () {
 var ViewBag = {};
 ViewBag.list = [
 { age: 38, name: "zhangsan" },
 { age: 19, name: "lisi" },
 { age: 13, name: "wangwu" }
 ];
 $(test).renderToParent(ViewBag);
});

 <div data-name="zhangsan">
 这么大了啊~
</div>
<div data-name="lisi">
 哎哟,不错哟,成年了
</div>
<div data-name="wangwu">
 小屁孩,哈哈
</div>

就是 @ + 任意空白 + 任意字符* + { ... }这样的结构 因此直接在html里面写

[@function](/user/function) test(name){
 <div>@(name)</div>
}

也是可以的,效果就是往结果里面写入 <div>@(name)</div>,通过@{ test("abcd");}调用方法就行

用这个库,写了个小玩具,简易CSS预处理,支持变量,函数... http://magicdawn.github.io/2014/07/08/simple-css-pre-handler/

代码写了好多,但是没有ASP.NET MVC的razor好用...因为@var输出给我一种很不规则,要出事的感觉,也就没有搞这些,也不会啊...

min 版本 在上面那个 网址后面加个min可得到 https://rawgit.com/magicdawn/razor-tmpl/master/razor-tmpl.min.js