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](/user/for)](/user/for)](/user/for)](/user/for)](/user/for)](/user/for)](/user/for)](/user/for)](/user/for)](/user/for)](/user/for)](/user/for)](/user/for)](/user/for)](/user/for)(xxx) …

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

[[[[[[[[[[[[[[[[@for](/user/for)](/user/for)](/user/for)](/user/for)](/user/for)](/user/for)](/user/for)](/user/for)](/user/for)](/user/for)](/user/for)](/user/for)](/user/for)](/user/for)](/user/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](/user/var)](/user/var)](/user/var)](/user/var)](/user/var)](/user/var)](/user/var)](/user/var)](/user/var)](/user/var)](/user/var)](/user/var)](/user/var)](/user/var)](/user/var)](/user/var)输出给我一种很不规则,要出事的感觉,也就没有搞这些,也不会啊…