Hogan.js定义 | 少将全栈

Hogan.js是 Twitter团队所制作的一个针对mustache模板的语法解析器。Hogan.js不依赖其它任何库或框架，同时保证了高效率的模板解析，而其体积却仅有2.5K
它具体的特征如下：
Hogan 快 ?? 试试你的工作量。
Hogan有单独的扫描，语法分析和代码生成阶段。这样就可以添加新的功能不需触摸扫描仪，和许多不同的代码生成技术，可以尝试不改变解析器。
Hogan扫描和解析方法出现。这可能是有用的，在服务器上的预处理模板。
使用hogan模板对象没有Hogan编译器目前也有可能。这意味着你可以预先编译你的模板在服务器上，并避免编译的编译器。
Hogan还支持模板继承，并保持与其他实现像mustache.java ,mustache.php，和GRMustache。

Hogan.js用法

用它作为你的一部分资产打包编译模板提前或将它包括在你的浏览器来处理动态模板。

Hogan.js使用之前，先在引用Hogan.js。

    <ol class="linenums">
        
        <li class="L0">
            <span class="tag"><script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"<a href="https://www.whatled.com/post-tag/hogan%2Ejs" title="查看更多关于hogan.js的文章" target="_blank">hogan.js</a>"</span><span class="tag">></script></span>
        </li>

    </ol>

Hogan.js使用方法：定义一组数据(data)，通过Hogan.compile()方法编译，得到模版对象通过render()方法渲染数据。示例如下：

    <ol class="linenums">
        
        <li class="L0">
            <span class="kwd">var</span><span class="pln"> data </span><span class="pun">=</span><span class="pln"> </span><span class="pun">{</span>
        </li>

        <li class="L1">
            <span class="pln"> screenName</span><span class="pun">:</span><span class="pln"> </span><span class="str">"dhg"</span>
        </li>

        <li class="L2">
            <span class="pun">};</span>
        </li>

        <li class="L3">
            <span class="pln"> </span>
        </li>

        <li class="L4">
            <span class="kwd">var</span><span class="pln"> </span><span class="kwd">template</span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="typ">Hogan</span><span class="pun">.</span><span class="pln">compile</span><span class="pun">(</span><span class="str">"Follow @{{screenName}}."</span><span class="pun">);</span>
        </li>

        <li class="L5">
            <span class="kwd">var</span><span class="pln"> output </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">template</span><span class="pun">.</span><span class="pln">render</span><span class="pun">(</span><span class="pln">data</span><span class="pun">);</span>
        </li>

        <li class="L6">
            <span class="pln"> </span>
        </li>

        <li class="L7">
            <span class="com">// prints "Follow @dhg."</span>
        </li>

        <li class="L8">
            <span class="pln">console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="pln">output</span><span class="pun">);</span>
        </li>

    </ol>

安装

如果你开发Node.js，只是使用NPM添加根包。

    <ol class="linenums">
        
        <li class="L0">
            <span class="pln">$ npm install hogan</span><span class="pun">.</span><span class="pln">js</span>
        </li>

    </ol>

另外，通过添加下面的脚本在浏览器hogan.js。

    <ol class="linenums">
        
        <li class="L0">
            <span class="tag"><script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"http://twitter.github.io/<a href="https://www.whatled.com/post-tag/hogan%2Ejs" title="查看更多关于hogan.js的文章" target="_blank">hogan.js</a>/builds/3.0.2/hogan-3.0.2.js"</span><span class="tag">></script></span>
        </li>

    </ol>

使用hogan.js可以下载到本地，进行引用例如：<script src=”hogan.js“></script>。

注意：本课程主要运用到浏览器中，如何使用。

Hogan.js浏览器端编译

Hogan.js 是 Mustache 模板引擎的另一套实现，增加了预编译机制，使得模板字符串可以在打包阶段被预先处理成模板函数，这样浏览器就不必再重复去编译模板。

Hogan.js 同时提供了可以运行与_浏览器端，浏览器端负责用预编译后的代码渲染页面。

        <ol class="linenums">
            
            <li class="L0">
                <span class="kwd">var</span><span class="pln"> </span><span class="typ">Template</span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="pun">{</span>
            </li>

            <li class="L1">
                <span class="pln"> _cache</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{},</span>
            </li>

            <li class="L2">
                <span class="pln"> </span>
            </li>

            <li class="L3">
                <span class="pln"> </span><span class="com">// 所有的模板放在这个对象下</span>
            </li>

            <li class="L4">
                <span class="pln"> _template</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span>
            </li>

            <li class="L5">
                <span class="pln"> hello</span><span class="pun">:</span><span class="pln"> </span><span class="com">/*TMPL*/</span><span class="str">"hello {{name}}!"</span><span class="com">/*TMPL*/</span><span class="pln"> </span>
            </li>

            <li class="L6">
                <span class="pln"> </span><span class="pun">},</span>
            </li>

            <li class="L7">
                <span class="pln"> </span>
            </li>

            <li class="L8">
                <span class="pln"> </span><span class="com">// 这个适配函数会同时处理字符串模板和模板函数的情况</span>
            </li>

            <li class="L9">
                <span class="pln"> render</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> </span><span class="pun">(</span><span class="pln">name</span><span class="pun">,</span><span class="pln"> data</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span>
            </li>

            <li class="L0">
                <span class="pln"> </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(!</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">_cache</span><span class="pun">[</span><span class="pln">name</span><span class="pun">])</span><span class="pln"> </span><span class="pun">{</span>
            </li>

            <li class="L1">
                <span class="pln"> </span><span class="com">// 如果代码被预编译过，则不需要 compile</span>
            </li>

            <li class="L2">
                <span class="pln"> </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="kwd">typeof</span><span class="pln"> </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">_template</span><span class="pun">[</span><span class="pln">name</span><span class="pun">]</span><span class="pln"> </span><span class="pun">===</span><span class="pln"> </span><span class="str">’function’</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span>
            </li>

            <li class="L3">
                <span class="pln"> </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">_cache</span><span class="pun">[</span><span class="pln">name</span><span class="pun">]</span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">Hogan</span><span class="pun">.</span><span class="typ">Template</span><span class="pun">(</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">_template</span><span class="pun">[</span><span class="pln">name</span><span class="pun">]);</span>
            </li>

            <li class="L4">
                <span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">else</span><span class="pln"> </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="kwd">typeof</span><span class="pln"> </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">_template</span><span class="pun">[</span><span class="pln">name</span><span class="pun">]</span><span class="pln"> </span><span class="pun">===</span><span class="pln"> </span><span class="str">’string’</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span>
            </li>

            <li class="L5">
                <span class="pln"> </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">_cache</span><span class="pun">[</span><span class="pln">name</span><span class="pun">]</span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="typ">Hogan</span><span class="pun">.</span><span class="pln">compile</span><span class="pun">(</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">_template</span><span class="pun">[</span><span class="pln">name</span><span class="pun">]);</span>
            </li>

            <li class="L6">
                <span class="pln"> </span><span class="pun">}</span>
            </li>

            <li class="L7">
                <span class="pln"> </span><span class="pun">}</span>
            </li>

            <li class="L8">
                <span class="pln"> </span>
            </li>

            <li class="L9">
                <span class="pln"> </span><span class="kwd">return</span><span class="pln"> </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">_cache</span><span class="pun">[</span><span class="pln">name</span><span class="pun">].</span><span class="pln">render</span><span class="pun">(</span><span class="pln">data</span><span class="pun">);</span>
            </li>

            <li class="L0">
                <span class="pln"> </span><span class="pun">}</span>
            </li>

            <li class="L1">
                <span class="pun">};</span>
            </li>

            <li class="L2">
                <span class="pln"> </span>
            </li>

            <li class="L3">
                <span class="pln">console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="typ">Template</span><span class="pun">.</span><span class="pln">render</span><span class="pun">(</span><span class="str">’hello’</span><span class="pun">,</span><span class="pln"> </span><span class="pun">{</span><span class="pln">name</span><span class="pun">:</span><span class="pln"> </span><span class="str">"hubwiz"</span><span class="pun">}));</span><span class="pln"> </span><span class="com">// hello hubwiz!</span>
            </li>

            <li class="L4">
                <span class="pln">console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="typ">Template</span><span class="pun">.</span><span class="pln">render</span><span class="pun">(</span><span class="str">’hello’</span><span class="pun">,</span><span class="pln"> </span><span class="pun">{</span><span class="pln">name</span><span class="pun">:</span><span class="pln"> </span><span class="str">"汇智网"</span><span class="pun">}));</span><span class="pln"> </span><span class="com">// hello 汇智网!</span>
            </li>

        </ol>

nodejs 环境中的预编译

Hogan.js 同时提供了可以运行 node.js 环境下的代码，node.js 负责打包时预编译，浏览器端负责用预编译后的代码渲染页面。

    <ol class="linenums">
        
        <li class="L0">
            <span class="kwd">var</span><span class="pln"> hogan </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">require</span><span class="pun">(</span><span class="str">"hogan.js"</span><span class="pun">);</span>
        </li>

        <li class="L1">
            <span class="kwd">var</span><span class="pln"> fs </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">require</span><span class="pun">(</span><span class="str">"fs"</span><span class="pun">);</span>
        </li>

        <li class="L2">
            <span class="kwd">var</span><span class="pln"> fileContent </span><span class="pun">=</span><span class="pln"> fs</span><span class="pun">.</span><span class="pln">readFileSync</span><span class="pun">(</span><span class="str">"demo.js"</span><span class="pun">,</span><span class="pln"> </span><span class="str">"utf-8"</span><span class="pun">);</span>
        </li>

        <li class="L3">
            <span class="pln">fileContent</span><span class="pun">.</span><span class="pln">replace</span><span class="pun">(</span><span class="str">//*TMPL*/"(.*?)"/*TMPL*//</span><span class="pln">g</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> </span><span class="pun">(</span><span class="pln">$0</span><span class="pun">,</span><span class="pln"> $1</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span>
        </li>

        <li class="L4">
            <span class="pln"> </span><span class="kwd">return</span><span class="pln"> hogan</span><span class="pun">.</span><span class="pln">compile</span><span class="pun">(</span><span class="pln">$1</span><span class="pun">,</span><span class="pln"> </span><span class="pun">{</span>
        </li>

        <li class="L5">
            <span class="pln"> asString</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span>
        </li>

        <li class="L6">
            <span class="pln"> </span><span class="pun">});</span>
        </li>

        <li class="L7">
            <span class="pun">});</span>
        </li>

        <li class="L8">
            <span class="pln">fs</span><span class="pun">.</span><span class="pln">writeFileSync</span><span class="pun">(</span><span class="str">"demo.js"</span><span class="pun">,</span><span class="pln"> fileContent</span><span class="pun">,</span><span class="pln"> </span><span class="str">"utf-8"</span><span class="pun">);</span>
        </li>

    </ol>

源代码编译完之后，模板字符串就变成了模板函数：

    <ol class="linenums">
        
        <li class="L0">
            <span class="com">/* ... */</span>
        </li>

        <li class="L1">
            <span class="pln"> hello</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">c</span><span class="pun">,</span><span class="pln">p</span><span class="pun">,</span><span class="pln">i</span><span class="pun">){</span><span class="kwd">var</span><span class="pln"> _</span><span class="pun">=</span><span class="kwd">this</span><span class="pun">;</span><span class="pln">_</span><span class="pun">.</span><span class="pln">b</span><span class="pun">(</span><span class="pln">i</span><span class="pun">=</span><span class="pln">i</span><span class="pun">||</span><span class="str">""</span><span class="pun">);</span><span class="pln">_</span><span class="pun">.</span><span class="pln">b</span><span class="pun">(</span><span class="str">"hello "</span><span class="pun">);</span><span class="pln">_</span><span class="pun">.</span><span class="pln">b</span><span class="pun">(</span><span class="pln">_</span><span class="pun">.</span><span class="pln">v</span><span class="pun">(</span><span class="pln">_</span><span class="pun">.</span><span class="pln">f</span><span class="pun">(</span><span class="str">"name"</span><span class="pun">,</span><span class="pln">c</span><span class="pun">,</span><span class="pln">p</span><span class="pun">,</span><span class="lit">0</span><span class="pun">)));</span><span class="pln">_</span><span class="pun">.</span><span class="pln">b</span><span class="pun">(</span><span class="str">"!"</span><span class="pun">);</span><span class="kwd">return</span><span class="pln"> _</span><span class="pun">.</span><span class="pln">fl</span><span class="pun">();;}</span>
        </li>

        <li class="L2">
            <span class="com">/* ... */</span>
        </li>

        <li class="L3">
            <span class="pln"> </span>
        </li>

        <li class="L4">
            <span class="pln">console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="typ">Template</span><span class="pun">.</span><span class="pln">render</span><span class="pun">(</span><span class="str">’hello’</span><span class="pun">,</span><span class="pln"> </span><span class="pun">{</span><span class="pln">name</span><span class="pun">:</span><span class="pln"> </span><span class="str">"foo"</span><span class="pun">}));</span><span class="pln"> </span><span class="com">// hello foo!</span>
        </li>

        <li class="L5">
            <span class="pln">console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="typ">Template</span><span class="pun">.</span><span class="pln">render</span><span class="pun">(</span><span class="str">’hello’</span><span class="pun">,</span><span class="pln"> </span><span class="pun">{</span><span class="pln">name</span><span class="pun">:</span><span class="pln"> </span><span class="str">"bar"</span><span class="pun">}));</span><span class="pln"> </span><span class="com">// hello bar!</span>
        </li>

    </ol>

名称概要

名称

Mustache 是一个 logic-less （轻逻辑）模板解析引擎，它的优势在于可以应用在 Javascript、PHP、Python 等多种编程语言中。也是基于JavaScript实现的模版引擎，类似于JQuery Template，但是这个模版更加的轻量级，语法更加的简单易用，很容易上手。

概要

Hogan.js 是 Mustache 模板引擎的另一套实现，增加了预编译机制，这意味着你得到的变量，块，lambda表达式，部分模板，过滤器，和其他一切你期望从mustache模板快得多。

模板示例

接下来是我们怎样使用典型Mustache模板示例，我们需要几个步骤:

1、定义绑定模板数据

    <ol class="linenums">
        
        <li class="L0">
            <span class="kwd">var</span><span class="pln"> data </span><span class="pun">=</span><span class="pln"> </span><span class="pun">{</span><span class="pln">name </span><span class="pun">:</span><span class="pln"> </span><span class="str">"汇智网"</span><span class="pun">}</span><span class="pln"> </span>
        </li>

    </ol>

2、绑定数据的模板

    <ol class="linenums">
        
        <li class="L0">
            <span class="pun">{{</span><span class="pln">name</span><span class="pun">}}</span>
        </li>

    </ol>

通过Hogan.compile()预编译，生成模板对象template

    <ol class="linenums">
        
        <li class="L0">
            <span class="kwd">var</span><span class="pln"> </span><span class="kwd">template</span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="typ">Hogan</span><span class="pun">.</span><span class="pln">compile</span><span class="pun">(</span><span class="str">"{{name}}."</span><span class="pun">);</span>
        </li>

    </ol>

3、获取到模板对象，通过render()渲染出html，就是你想要的

    <ol class="linenums">
        
        <li class="L0">
            <span class="kwd">var</span><span class="pln"> output </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">template</span><span class="pun">.</span><span class="pln">render</span><span class="pun">(</span><span class="pln">data</span><span class="pun">);</span>
        </li>

        <li class="L1">
            <span class="pln">console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="pln">output</span><span class="pun">);</span>
        </li>

    </ol>

在后面的知识点中，都是同样的应用，定义data数据（hash），模板，最后通过render()渲染结果。

引言和TAG类型

引言

Mustache 可用于HTML,配置文件，源代码等，通过扩展标签(Tags)来渲染模板，标签的值一般是hash或者js对象。

之所以称为“logic-less”，是因为它既没有if-else，也没有for循环，Mustache只有标签。一些标签会被值来替换，有些不会，还有些会被系列的值替换。本文主要介绍不同类型的Mustache标签。

TAG类型

标签(Tags) 使用{{ }}来描述. {{person}}是一个标签, {{#person}}也是标签. 在上面两个示例中，我们将person作为key值或者标签key，下面我们来看看不同类型的tag。

变量

变量是最基本的Tag类型，模板中的{{name}} 标签会尝试在上下文中寻找名称键值，如果没有找到，则不进行渲染。

所有的变量默认都进行了HTML转义，如果你想返回未转义的HTML，请使用三个花括号{{{name}}}。

默认情况下，变量缺失会返回一个空字符串。例如：

模板 :

    <ol class="linenums">
        
        <li class="L0">
            <span class="pun">{{</span><span class="pln">name</span><span class="pun">}}</span>
        </li>

    </ol>

hash – data绑定的数据 :

    <ol class="linenums">
        
        <li class="L0">
            <span class="kwd">var</span><span class="pln"> data </span><span class="pun">=</span><span class="pln"> </span><span class="pun">{</span>
        </li>

        <li class="L1">
            <span class="pln"> </span><span class="str">"name"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"汇智网"</span>
        </li>

        <li class="L2">
            <span class="pln"> </span><span class="pun">}</span><span class="pln"> </span>
        </li>

    </ol>

输出 – render()渲染输出结果:

    <ol class="linenums">
        
        <li class="L0">
            <span class="kwd">var</span><span class="pln"> output </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">template</span><span class="pun">.</span><span class="pln">render</span><span class="pun">(</span><span class="pln">data</span><span class="pun">);</span><span class="pln"> </span>
        </li>

        <li class="L1">
            <span class="pln">console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="pln">output</span><span class="pun">);</span><span class="pln"> </span><span class="com">// 汇智网</span>
        </li>

    </ol>

变量 &跳过转义

另外你也可以使用&来跳过转义：{{& name}}，当改变分隔符的时候，这种方式比较有用。

模板 :

    <ol class="linenums">
        
        <li class="L0">
            <span class="pun">{{&</span><span class="pln"> name</span><span class="pun">}}</span>
        </li>

    </ol>

hash – data绑定的数据 :

    <ol class="linenums">
        
        <li class="L0">
            <span class="kwd">var</span><span class="pln"> data </span><span class="pun">=</span><span class="pln"> </span><span class="pun">{</span>
        </li>

        <li class="L1">
            <span class="pln"> </span><span class="str">"name"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"<b>汇智网</b>"</span>
        </li>

        <li class="L2">
            <span class="pln"> </span><span class="pun">}</span><span class="pln"> </span>
        </li>

    </ol>

输出 – render()渲染输出结果:

    <ol class="linenums">
        
        <li class="L0">
            <span class="kwd">var</span><span class="pln"> output </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">template</span><span class="pun">.</span><span class="pln">render</span><span class="pun">(</span><span class="pln">data</span><span class="pun">);</span><span class="pln"> </span>
        </li>

        <li class="L1">
            <span class="pln">console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="pln">output</span><span class="pun">);</span><span class="pln"> </span><span class="com">// <b>汇智网</b></span>
        </li>

    </ol>

不存在值以及空列表

一次或者多次渲染大段的文本使用块，这依赖于上下文的键值。

块使用#起始，以/结束。即{{#person}}表示person块起始，而{{/person}}表示结束。块的表现由键值来决定。

不存在值以及空列表

如果person键不存在值或者空列表，在#，/之间的HTML则不会显示。

模板 :

    <ol class="linenums">
        
        <li class="L0">
            <span class="typ">Shown</span><span class="pun">.</span>
        </li>

        <li class="L1">
            <span class="pun">{{</span><span class="com">#nothin}}</span>
        </li>

        <li class="L2">
            <span class="pln"> </span><span class="typ">Never</span><span class="pln"> shown</span><span class="pun">!</span>
        </li>

        <li class="L3">
            <span class="pun">{{/</span><span class="pln">nothin</span><span class="pun">}}</span>
        </li>

    </ol>

hash – data绑定数据:

    <ol class="linenums">
        
        <li class="L0">
            <span class="kwd">var</span><span class="pln"> data </span><span class="pun">=</span><span class="pln"> </span><span class="pun">{</span>
        </li>

        <li class="L1">
            <span class="pln"> </span><span class="str">"person"</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span>
        </li>

        <li class="L2">
            <span class="pun">}</span>
        </li>

    </ol>

输出 – render()渲染输出结果:

    <ol class="linenums">
        
        <li class="L0">
            <span class="kwd">var</span><span class="pln"> output </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">template</span><span class="pun">.</span><span class="pln">render</span><span class="pun">(</span><span class="pln">data</span><span class="pun">);</span><span class="pln"> </span>
        </li>

        <li class="L1">
            <span class="pln">console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="pln">output</span><span class="pun">);</span><span class="pln"> </span><span class="com">// Shown.</span>
        </li>

    </ol>

注意：如果把模板中{{#nothin}}改为{{#person}}，将会显示之间的HTML。

非空列表

如果person键存在，并且值为真，在#，/之间的HTML则会被渲染，并且进行一次或者多次渲染。

当值为非空列表时，列表中的文本则会被遍历展示。段落的内容则会被赋予到当前的列表项的for each迭代器。通过这种方式，我们可以遍历集合。

模板 :

    <ol class="linenums">
        
        <li class="L0">
            <span class="pun">{{</span><span class="com">#person}}</span>
        </li>

        <li class="L1">
            <span class="pln"> </span><span class="str"><b></span><span class="pun">{{</span><span class="pln">name</span><span class="pun">}}</</span><span class="pln">b</span><span class="pun">></span>
        </li>

        <li class="L2">
            <span class="pun">{{/</span><span class="pln">person</span><span class="pun">}}</span>
        </li>

    </ol>

Hash – data绑定数据:

    <ol class="linenums">
        
        <li class="L0">
            <span class="pun">{</span>
        </li>

        <li class="L1">
            <span class="pln"> </span><span class="str">"person"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span>
        </li>

        <li class="L2">
            <span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="str">"name"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"resque"</span><span class="pln"> </span><span class="pun">},</span>
        </li>

        <li class="L3">
            <span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="str">"name"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"hub"</span><span class="pln"> </span><span class="pun">},</span>
        </li>

        <li class="L4">
            <span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="str">"name"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"rip"</span><span class="pln"> </span><span class="pun">}</span>
        </li>

        <li class="L5">
            <span class="pln"> </span><span class="pun">]</span>
        </li>

        <li class="L6">
            <span class="pun">}</span>
        </li>

    </ol>

输出 – render()渲染输出:

    <ol class="linenums">
        
        <li class="L0">
            <span class="kwd">var</span><span class="pln"> output </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">template</span><span class="pun">.</span><span class="pln">render</span><span class="pun">(</span><span class="pln">data</span><span class="pun">);</span><span class="pln"> </span>
        </li>

        <li class="L1">
            <span class="pln">console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="pln">output</span><span class="pun">);</span><span class="pln"> </span>
        </li>

        <li class="L2">
            <span class="str"><b></span><span class="pln">resque</span><span class="pun"><</span><span class="str">/b></span>
        </li>

        <li class="L3">
            <span class="str"><b>hub</</span><span class="pln">b</span><span class="pun">></span>
        </li>

        <li class="L4">
            <span class="str"><b></span><span class="pln">rip</span><span class="pun"></</span><span class="pln">b</span><span class="pun">></span>
        </li>

    </ol>

Lambdas表达式

当值是可调用的对象，例如function或者lambda，那么对象会被调用并且跳过文本。

被跳过的文字不进行渲染。{{tags}}将不会被展开??由lambda自身来决定。通过这种方式，可以实现过滤器以及缓存。

模板 :

    <ol class="linenums">
        
        <li class="L0">
            <span class="pun">{{</span><span class="com">#wrapped}}</span>
        </li>

        <li class="L1">
            <span class="pln"> </span><span class="pun">{{</span><span class="pln">name</span><span class="pun">}}</span><span class="pln"> </span><span class="kwd">is</span><span class="pln"> awesome</span><span class="pun">.</span>
        </li>

        <li class="L2">
            <span class="pun">{{/</span><span class="pln">wrapped</span><span class="pun">}}</span>
        </li>

    </ol>

Hash – data绑定数据:

    <ol class="linenums">
        
        <li class="L0">
            <span class="pun">{</span>
        </li>

        <li class="L1">
            <span class="pln"> </span><span class="str">"name"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"Willy"</span><span class="pun">,</span>
        </li>

        <li class="L2">
            <span class="pln"> </span><span class="str">"wrapped"</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span>
        </li>

        <li class="L3">
            <span class="pln"> </span><span class="kwd">return</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">text</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span>
        </li>

        <li class="L4">
            <span class="pln"> </span><span class="kwd">return</span><span class="pln"> </span><span class="str">"<b>"</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> text </span><span class="pun">+</span><span class="pln"> </span><span class="str">"</b>"</span>
        </li>

        <li class="L5">
            <span class="pln"> </span><span class="pun">}</span>
        </li>

        <li class="L6">
            <span class="pln"> </span><span class="pun">}</span>
        </li>

        <li class="L7">
            <span class="pun">}</span>
        </li>

    </ol>

输出 – render()渲染输出结果:

    <ol class="linenums">
        
        <li class="L0">
            <span class="kwd">var</span><span class="pln"> output </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">template</span><span class="pun">.</span><span class="pln">render</span><span class="pun">(</span><span class="pln">data</span><span class="pun">);</span><span class="pln"> </span>
        </li>

        <li class="L1">
            <span class="pln">console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="pln">output</span><span class="pun">);</span>
        </li>

        <li class="L2">
            <span class="str"><b></span><span class="typ">Willy</span><span class="pln"> </span><span class="kwd">is</span><span class="pln"> awesome</span><span class="pun">.</</span><span class="pln">b</span><span class="pun">></span>
        </li>

    </ol>

在这里wrapped值为function，对象被调用。

真值

当值为真但不是一个列表的时候，就将当前元素输出页面。

模板 :

    <ol class="linenums">
        
        <li class="L0">
            <span class="pun">{{</span><span class="com">#person?}}</span>
        </li>

        <li class="L1">
            <span class="pln"> </span><span class="typ">Hi</span><span class="pln"> </span><span class="pun">{{</span><span class="pln">name</span><span class="pun">}}!</span>
        </li>

        <li class="L2">
            <span class="pun">{{/</span><span class="pln">person</span><span class="pun">?}}</span>
        </li>

    </ol>

Hash – data绑定数据:

    <ol class="linenums">
        
        <li class="L0">
            <span class="pun">{</span>
        </li>

        <li class="L1">
            <span class="pln"> </span><span class="str">"person?"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="str">"name"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"Jon"</span><span class="pln"> </span><span class="pun">}</span>
        </li>

        <li class="L2">
            <span class="pun">}</span>
        </li>

    </ol>

输出:

    <ol class="linenums">
        
        <li class="L0">
            <span class="kwd">var</span><span class="pln"> output </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">template</span><span class="pun">.</span><span class="pln">render</span><span class="pun">(</span><span class="pln">data</span><span class="pun">);</span><span class="pln"> </span>
        </li>

        <li class="L1">
            <span class="pln">console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="pln">output</span><span class="pun">);</span>
        </li>

        <li class="L2">
            <span class="typ">Hi</span><span class="pln"> </span><span class="typ">Jon</span><span class="pun">!</span>
        </li>

    </ol>

{{#person?}} 模板中的?表示值是否为真。

反向块

反向块由^起始，/结束。即{{^person}} 表示person开始一个反向块，而{{/person}}结束。

部分可用于根据键的值来呈现文本的一个或多个，反向块可以根据关键的逆值来呈现文本。也就是说，如果键不存在，它们将被渲染是不存在的，或者是一个空列表。

模板 :

    <ol class="linenums">
        
        <li class="L0">
            <span class="pun">{{</span><span class="com">#person}}</span>
        </li>

        <li class="L1">
            <span class="pln"> </span><span class="str"><b></span><span class="pun">{{</span><span class="pln">name</span><span class="pun">}}</</span><span class="pln">b</span><span class="pun">></span>
        </li>

        <li class="L2">
            <span class="pun">{{/</span><span class="pln">person</span><span class="pun">}}</span>
        </li>

        <li class="L3">
            <span class="pun">{{^</span><span class="pln">person</span><span class="pun">}}</span>
        </li>

        <li class="L4">
            <span class="pln"> </span><span class="typ">No</span><span class="pln"> repos </span><span class="pun">:(</span>
        </li>

        <li class="L5">
            <span class="pun">{{/</span><span class="pln">person</span><span class="pun">}}</span>
        </li>

    </ol>

Hash – data绑定数据:

    <ol class="linenums">
        
        <li class="L0">
            <span class="kwd">var</span><span class="pln"> data </span><span class="pun">=</span><span class="pln"> </span><span class="pun">{</span>
        </li>

        <li class="L1">
            <span class="pln"> </span><span class="str">"person"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[]</span>
        </li>

        <li class="L2">
            <span class="pun">}</span>
        </li>

    </ol>

输出:

    <ol class="linenums">
        
        <li class="L0">
            <span class="typ">No</span><span class="pln"> repos </span><span class="pun">:(</span>
        </li>

    </ol>

我们看到在模板中，上面是块级的，下面一组数据是反向块，data数据中person键对应的是空数据，从而模板将反向块中的内容输出，如果data数据中person:“person”: [{name:’lily’}]，将会输出块中的内容。

注释

注释是开始一个！和一个ignore。以下模板：

    <ol class="linenums">
        
        <li class="L0">
            <span class="tag"><h1></span><span class="pln">Today{{! ignore me }}.</span><span class="tag"></h1></span>
        </li>

    </ol>

将呈现如下：

    <ol class="linenums">
        
        <li class="L0">
            <span class="tag"><h1></span><span class="pln">Today.</span><span class="tag"></h1></span>
        </li>

    </ol>

注释可以包含换行。

部分模板

部分模板开始于一个 >，像{{> box}}。

部分模板呈现在运行时(而不是编译时),那么递归部分模板是可能的。只是避免无限循环。

部分模板主要应用到，例如我们一个网站中会有header和footer，不必要在每个页面都重新布局一次，我们只需要通过部分模板，引用进来。

他们也继承调用上下文。而在ERB可能是这样:

    <ol class="linenums">
        
        <li class="L0">
            <span class="pun"><%=</span><span class="pln"> </span><span class="kwd">partial</span><span class="pln"> </span><span class="pun">:</span><span class="pln">next_more</span><span class="pun">,</span><span class="pln"> </span><span class="pun">:</span><span class="pln">start </span><span class="pun">=></span><span class="pln"> start</span><span class="pun">,</span><span class="pln"> </span><span class="pun">:</span><span class="pln">size </span><span class="pun">=></span><span class="pln"> size %></span>
        </li>

    </ol>

Mustache 要求是这样:

    <ol class="linenums">
        
        <li class="L0">
            <span class="pun">{{></span><span class="pln"> next_more</span><span class="pun">}}</span>
        </li>

    </ol>

例如,这个模板和部分:

base.mustache:

    <ol class="linenums">
        
        <li class="L0">
            <span class="tag"><h2></span><span class="pln">Names</span><span class="tag"></h2></span>
        </li>

        <li class="L1">
            <span class="pln">{{#names}}</span>
        </li>

        <li class="L2">
            <span class="pln"> {{> user}}</span>
        </li>

        <li class="L3">
            <span class="pln">{{/names}}</span>
        </li>

    </ol>

user.mustache:

    <ol class="linenums">
        
        <li class="L0">
            <span class="tag"><strong></span><span class="pln">{{name}}</span><span class="tag"></strong></span>
        </li>

    </ol>

可以认为是一个单一的、扩展模板:

    <ol class="linenums">
        
        <li class="L0">
            <span class="tag"><h2></span><span class="pln">Names</span><span class="tag"></h2></span>
        </li>

        <li class="L1">
            <span class="pln">{{#names}}</span>
        </li>

        <li class="L2">
            <span class="pln"> </span><span class="tag"><strong></span><span class="pln">{{name}}</span><span class="tag"></strong></span>
        </li>

        <li class="L3">
            <span class="pln">{{/names}}</span>
        </li>

    </ol>

设置分隔符

设置分隔符标记从一个等号,改变开始标记分隔符从{ {and} }到自定义字符串。

考虑下面的例子:

    <ol class="linenums">
        
        <li class="L0">
            <span class="pun">*</span><span class="pln"> </span><span class="pun">{{</span><span class="pln">default_tags</span><span class="pun">}}</span>
        </li>

        <li class="L1">
            <span class="pun">{{=<%</span><span class="pln"> </span><span class="pun">%>=}}</span>
        </li>

        <li class="L2">
            <span class="pun">*</span><span class="pln"> </span><span class="pun"><%</span><span class="pln"> erb_style_tags </span><span class="pun">%></span>
        </li>

        <li class="L3">
            <span class="pun"><%={{</span><span class="pln"> </span><span class="pun">}}=%></span>
        </li>

        <li class="L4">
            <span class="pun">*</span><span class="pln"> </span><span class="pun">{{</span><span class="pln"> default_tags_again </span><span class="pun">}}</span>
        </li>

    </ol>

我们有三个项目列表。

第一项使用默认的标签样式,
第二使用erb样式定义的分隔符标记集,
第三个返回默认样式后另一组分隔符声明。

自定义分隔符不能包含空格或者等号。

查找数据绑定到模板

假设我们现在有data数据是请求从后台返回的数据，这组数据是记录员工的姓名的

    <ol class="linenums">
        
        <li class="L0">
            <span class="kwd">var</span><span class="pln"> data </span><span class="pun">=</span><span class="pln"> </span><span class="pun">{</span>
        </li>

        <li class="L1">
            <span class="pln"> employees</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span>
        </li>

        <li class="L2">
            <span class="pln"> </span><span class="pun">{</span><span class="pln"> firstName</span><span class="pun">:</span><span class="pln"> </span><span class="str">"Christophe"</span><span class="pun">,</span>
        </li>

        <li class="L3">
            <span class="pln"> lastName</span><span class="pun">:</span><span class="pln"> </span><span class="str">"Coenraets"</span><span class="pun">},</span>
        </li>

        <li class="L4">
            <span class="pln"> </span><span class="pun">...</span>
        </li>

        <li class="L5">
            <span class="pln"> </span><span class="pun">]</span>
        </li>

        <li class="L6">
            <span class="pln"> </span><span class="pun">};</span>
        </li>

    </ol>

通过编译compile()方法编译，模板中通过{{占位符}}要绑定的数据形式，我们现在以列表形式展示数据。

    <ol class="linenums">
        
        <li class="L0">
            <span class="typ">Hogan</span><span class="pun">.</span><span class="pln">compile</span><span class="pun">(</span><span class="str">"Employees:<ul>{{#employees}}"</span><span class="pln"> </span><span class="pun">+</span>
        </li>

        <li class="L1">
            <span class="pln"> </span><span class="str">"<li>{{firstName}} {{lastName}}</li>"</span><span class="pln"> </span><span class="pun">+</span>
        </li>

        <li class="L2">
            <span class="pln"> </span><span class="str">"{{/employees}}</ul>"</span><span class="pun">);</span>
        </li>

    </ol>

通过render()方法，渲染要绑定的数据并替换掉模板中的占位符。

增加数据

在查找数据绑定到模板这节中，我们已经把获取的data数据绑定到模板中，并展示到页面中。

在我们实际应用中，模板快速的绑定数据，使我们更快速的进行操作，我们模仿从后天获取数据，现在我们给数据新加一条默认数据，添加到数组employees中，在重新给模板绑定新的数组，看看列表显示效果。

实例增加数据，现在我们通过一个增加按钮(add)，并为其绑定一个点击事件(click)，重新加一条数据，为模板重新赋值。

    <ol class="linenums">
        
        <li class="L0">
            <span class="pln">$</span><span class="pun">(</span><span class="str">’#add’</span><span class="pun">).</span><span class="pln">bind</span><span class="pun">(</span><span class="str">’click’</span><span class="pun">,</span><span class="kwd">function</span><span class="pun">(){</span>
        </li>

        <li class="L1">
            <span class="pln"> data</span><span class="pun">.</span><span class="pln">employees</span><span class="pun">.</span><span class="pln">push</span><span class="pun">(</span>
        </li>

        <li class="L2">
            <span class="pln"> </span><span class="pun">{</span><span class="pln">firstName</span><span class="pun">:</span><span class="pln"> </span><span class="str">"polo"</span><span class="pun">,</span>
        </li>

        <li class="L3">
            <span class="pln"> lastName</span><span class="pun">:</span><span class="pln"> </span><span class="str">"yu"</span><span class="pun">}</span>
        </li>

        <li class="L4">
            <span class="pln"> </span><span class="pun">);</span>
        </li>

        <li class="L5">
            <span class="pln"> $</span><span class="pun">(</span><span class="str">’#sampleArea’</span><span class="pun">).</span><span class="pln">html</span><span class="pun">(</span><span class="kwd">template</span><span class="pun">.</span><span class="pln">render</span><span class="pun">(</span><span class="pln">data</span><span class="pun">));</span><span class="pln"> </span><span class="com">// 重新为预编译模板绑定数据，并显示到页面 </span>
        </li>

        <li class="L6">
            <span class="pun">})</span>
        </li>

    </ol>

删除数据绑定到模板

我们为employees数据可以直接新增一条数据，也可以对这组数据中的某条数据进行删除，如果是操作数据库真实的数据，我们需要知道数据的id，进行删除操作。

在这里我们通过javascript中数组的操作，我们先把 John Smith移除。

    <ol class="linenums">
        
        <li class="L0">
            <span class="pln">array</span><span class="pun">.</span><span class="pln">pop</span><span class="pun">();</span><span class="pln"> </span><span class="com">// 移除最后一个元素并返回该元素值</span>
        </li>

    </ol>

实例删除数据，现在我们通过一个增加按钮(delete)，并为其绑定一个点击事件(click)，重新移除一条数据，为模板重新赋值。

    <ol class="linenums">
        
        <li class="L0">
            <span class="pln">$</span><span class="pun">(</span><span class="str">’#delete’</span><span class="pun">).</span><span class="pln">bind</span><span class="pun">(</span><span class="str">’click’</span><span class="pun">,</span><span class="kwd">function</span><span class="pun">(){</span>
        </li>

        <li class="L1">
            <span class="pln"> data</span><span class="pun">.</span><span class="pln">employees</span><span class="pun">.</span><span class="pln">pop</span><span class="pun">();</span>
        </li>

        <li class="L2">
            <span class="pln"> $</span><span class="pun">(</span><span class="str">’#sampleArea’</span><span class="pun">).</span><span class="pln">html</span><span class="pun">(</span><span class="kwd">template</span><span class="pun">.</span><span class="pln">render</span><span class="pun">(</span><span class="pln">data</span><span class="pun">));</span><span class="pln"> </span><span class="com">// 重新为预编译模板绑定数据，并显示到页面 </span>
        </li>

        <li class="L3">
            <span class="pun">})</span>
        </li>

    </ol>

修改数据绑定到模板

我们为employees数据可以直接新增一条数据，也可以对这组数据中的某条数据进行删除，如果是操作数据库真实的数据，我们需要知道数据的id，进行修改操作，然后在把新的内容，重新修改到数据库中。

在这里我们通过javascript中数组的操作，改变下数组的内容，我们把 John Smith 改成 Tom Smith。

实例修改数据，现在我们通过一个修改按钮(update)，并为其绑定一个点击事件(click)，重新修改一条数据，为模板重新赋值。

    <ol class="linenums">
        
        <li class="L0">
            <span class="pln">$</span><span class="pun">(</span><span class="str">’#update’</span><span class="pun">).</span><span class="pln">bind</span><span class="pun">(</span><span class="str">’click’</span><span class="pun">,</span><span class="kwd">function</span><span class="pun">(){</span>
        </li>

        <li class="L1">
            <span class="pln"> </span><span class="kwd">var</span><span class="pln"> arr </span><span class="pun">=</span><span class="pln"> data</span><span class="pun">.</span><span class="pln">employees</span><span class="pun">;</span>
        </li>

        <li class="L2">
            <span class="pln"> </span><span class="kwd">for</span><span class="pun">(</span><span class="kwd">var</span><span class="pln"> i </span><span class="pun">=</span><span class="pln"> </span><span class="lit">0</span><span class="pln"> </span><span class="pun">;</span><span class="pln"> i </span><span class="pun"><</span><span class="pln"> arr</span><span class="pun">.</span><span class="pln">length</span><span class="pun">;</span><span class="pln">i</span><span class="pun">++){</span>
        </li>

        <li class="L3">
            <span class="pln"> arr</span><span class="pun">[</span><span class="lit">1</span><span class="pun">].</span><span class="pln">firstName </span><span class="pun">=</span><span class="pln"> </span><span class="str">"Tom"</span><span class="pun">;</span>
        </li>

        <li class="L4">
            <span class="pln"> </span><span class="pun">}</span>
        </li>

        <li class="L5">
            <span class="pln"> $</span><span class="pun">(</span><span class="str">’#sampleArea’</span><span class="pun">).</span><span class="pln">html</span><span class="pun">(</span><span class="kwd">template</span><span class="pun">.</span><span class="pln">render</span><span class="pun">(</span><span class="pln">data</span><span class="pun">));</span><span class="pln"> </span><span class="com">// 重新为预编译模板绑定数据，并显示到页面 </span>
        </li>

        <li class="L6">
            <span class="pun">})</span>
        </li>

    </ol>

在此节中我们学习模板绑定数据实例中，主要是体会直接给模板绑定数据快速，方便，只需要改变数据，重新为模板赋值即可。同时我们也通过前端中简单的对数据操作，实现下增删改查的功能，体会绑定数据。

Hogan.js用法

安装

Hogan.js浏览器端编译

nodejs 环境中的预编译

名称概要

名称

概要

模板示例

引言和TAG类型

引言

TAG类型

变量

变量 &跳过转义

不存在值以及空列表

不存在值以及空列表

非空列表

Lambdas表达式

真值

反向块

注释

部分模板

设置分隔符

查找数据绑定到模板

增加数据

删除数据绑定到模板

修改数据绑定到模板

Hi，您需要填写昵称和邮箱！