sleet-handlebars v0.1.0

Sleet Handlebars

Sleet Handlebars 是 Sleet 的一个扩展，用于把 Sleet 代码编译成 Handlebars 模板

相关资源

• Sleet Sleetjs 是一种把代码编译成 HTML/XML 的语言
• Atom-Sleet Sleet 与 Sleet-Handlebars 在 Atom 编辑器里的插件(包括语法高亮、保存时编译、预览等功能)
• Handlebars-Sleet 用于把已有的 HTML/HBS(Handlebars 模板) 转换成 Sleet 文件

安装

npm install -g sleet-handlebars

声明

可以在sleet文件的第一行声明这个文件用sleet-handlebars来编译:

#!handlebars

输出文件的默认扩展名为:.hbs, 你可以在声明中更改扩展名, 如改为.html:

#!handlebars html

sleet-handlebars 有两个参数可以在声明中配置: block与inline

• block 用来指定 Handlebars Block Helper
• inline 用来指定 Handlebars Inline Helper

#!handlebars block=layout,view inline=date,shortDate

也可以通过 package.json 文件来配置这些参数:

{
    ...
    "dependencies": {
        ...
    },
    "sleet": {
        "handlebars": {
            "block": ["layout", "view"],
            "inline": ["date", "shortDate"]
        }
    }
}

所谓的 Block helper 是那种有开始标记与结束标记的 Helper, 并且在它内部可以有一个 {{else}} 标记.

例如：

{{#if}}
    something
{{else}}
    something else
{{/if}}

所谓的 Inline helper 不需要开始结束标记的那种 Helper.

例如：

{{fullname person}}
{{{fullname person}}}

文本中的 Handlebars 表达式

在文本中， 可以用 echo 标记来写 Handlebars表达式. 这个标记把没有用引号引起来的属性当成表达式

例如:

#!handlebars

a > echo(name)
if(name)
    echo('Hello ' name '!')
echo('My name is ' firstName ' ' lastName)
echo('My name is ') + echo(firstName) + echo(' ') + echo(lastName)
echo(
    text = 'My name is ' + firstName + ' ' + lastName
)
p
    | My name is
    echo(firstName)
    echo(lastName)

会编译成:

<a>{{name}}</a>
{{#if name}}
    Hello {{name}}!
{{/if}}
My name is {{firstName}} {{lastName}}
My name is {{firstName}} {{lastName}}
My name is {{firstName}} {{lastName}}
<p>
    My name is
    {{firstName}}
    {{lastName}}
</p>

HTML 属性里的 Handlebars 表达式

所有没有被引号引起来的属性值都会被当作表达式

例如:

#!handlebars

ul(class=className)
    li > a(id=id href='static/images/' + imagePath) Preview

会编译为:

<ul class="{{className}}">
    <li><a id="{{id}}" href="static/images/{{imagePath}}">Preview</a></li>
</ul>

所有的属性组后面都可以跟一个 限定符, 目前只支持 if 与 unless

例如:

#!handlebars

li(class='item')(class='active')&if(active)
    a(href='static/images/' + imagePath)&if(imagePath) Preview
li(class='inactive')&unless(active) hello

会编译为:

<li class="item {{#if active}}active{{/if}}">
    <a {{#if imagePath}} href="static/images/{{imagePath}}"{{/if}}>Preview</a>
</li>
<li class="{{#unless active}}inactive{{/unless}}">hello</li>

Block Helpers

内置的 Block Helper 一共有四个，分别是: if, unless, each, with. 它们的写法跟普通的 HTML 标记的写法没有区别, 不用像 Handlebars 里一样用两个大括号包起来.

例如:

#!handlebars block=helper

if(links)
    .list-group
        each(links)
            a.list-group-item(href=link)(class='active')&if(active)
                echo(linkText)
else.
    Have no links

helper(data 'string' 1 hash='string' hash2=data)
    h1 content
else
    h2 else content

将会编译为:

{{#if links}}
    <div class="list-group">
        {{#each links}}
            <a class="list-group-item {{#if active}}active{{/if}}" href="{{link}}">
                {{linkText}}
            </a>
        {{/each}}
    </div>
{{else}}
    Have no links
{{/if}}
{{#helper data "string" 1 hash="string" hash2=data}}
    <h1>content</h1>
{{else}}
    <h2>else content</h2>
{{/helper}}

Inline Block Helpers

在 Sleet-Handlebars 里面，并没有内置的 Inline helper.

你可以在 inline helper 前加上一个 @来表明这个表达式不需要 HTML 转码(与 Handlebars里 的3个大括号包起来是一样的效果)

例如:

#!handlebars inline=fullname,date

fullname(person)
date(createTime 'yyyy-MM-dd')

@fullname(person)
@date(createTime 'yyyy-MM-dd')

将会编译为:

{{fullname person}}
{{date createTime "yyyy-MM-dd"}}
{{{fullname person}}}
{{{date createTime "yyyy-MM-dd"}}}

License

MIT