模板全局配置

NornJ模板可通过修改全局配置来定制一些功能,如插值变量的规则等。

  • 通过nj.configAPI可设定各种全局配置,具体有:
名称 作用
delimiters 修改模板语法规则
outputH nj标签模板字符串返回的模板函数是否默认按hyperscript形式输出(即配合React的使用方式),默认值为false。引入nornj-react包后该值默认设置为true
createElement hyperscript形式的创建元素方法(即为React中的React.createElement),默认值为null。引入nornj-react包后该值默认设置为React.createElement
includeParser 模板中解析<#include>标签的方法,默认不添加到nj对象中。可以从nornj/tools/includeParser获取到这个函数,另外在nornj-loader内部会自动设置它。
textMode 是否使用文本模式解析,默认为false

修改模板语法规则

目前可修改的语法规则有:

import nj from 'nornj';

nj.config({
  delimiters: {
    start: '{%',      //插值变量开始字符,默认为"{{"
    end: '%}',        //插值变量结束字符,默认为"}}"
    extension: '$',   //标签前置字符,默认为"#"
    prop: '@-',       //参数标签前置字符,默认为"@"
    comment: '##'     //模板注释,默认为<!--#...#-->语法中的"#"
  }
});

const html = nj`
<div id=test1>
  <@-name>test1</@-name>
  this the test demo{%no%}.
  <$if {%hasNo%}>
    <i>test{%no%} is {{'running'}} in client side</i>
    <!--##Something that needs to be commented out##-->
  </$if>
</div>`();

如上例,可将模板规则替换为非默认规则的其他字符。利用这个可以实现用NornJ模板在node.js服务器端输出要在客户端运行的NornJ模板,因为语法规则不同,所以服务器端和客户端的模板不会发生冲突。

使用文本模式解析

NornJ在解析html字符串时默认全局使用非文本模式解析,解析方式和html非常类似,如下所示:

<div>
  <span>   test1</span>    <span>{'test2'}    </span>
</div>

以上模板会解析为下面这样,即会忽略多余的空格及换行符等:

<div>
  <span>test1</span>
  <span>test2</span>
</div>

但有时候不需要去除多余空格,这在给普通的文本做替换参数时非常有用。那么就可以这样全局开启文本模式

nj.config({
  textMode: true
});

这样上面的例子就会解析为:

<div>
  <span>   test1</span>    <span>test2    </span>
</div>

有些标签无论是否全局开启文本模式,它们的子节点都会使用文本模式解析,有如下几个标签:

  • style
  • script
  • textarea
  • xmp
  • nj-text,自定义的特殊标签,解析时只生成它的子节点,示例如下:
<div>
  <nj-text>
    <span>   test1</span>    <span>{'test2'}    </span>
  </nj-text>
</div>

解析为:

<div>
    <span>   test1</span>    <span>test2    </span>
</div>

results matching ""

    No results matching ""