标签

NornJ模板中可使用内置标签来表示if、else、each等流程控制语句以及更多的功能，也可以支持自定义标签。

• 标签语法

在NornJ模板中标签使用闭合的xml节点元素形式定义，节点名称为#+标签名称，也可定义元素节点参数，语法与普通元素节点类似：

<#ext {{prop1}} {{prop2}} checked prop3="test{{no}}">
  {{children}}
</#ext>

• 标签内每个插值变量也都可以使用过滤器或表达式，这样就可以实现更复杂的逻辑，例如：

<#ext {{value1.trim() | filter1}} {{ value2.length * 2 }}>
  test block
</#ext>

自定义标签

• 标签可支持自定义，这样就可以自行为模板实现各种各样的逻辑及功能。例如实现一个customIf全局标签：

<#customIf {{value.trim()}} useUnless>
  test if
  <#else>
    test else
  </#else>
</#customIf>

//每个标签都是一个函数，使用nj.registerExtension方法全局注册
nj.registerExtension('customIf', (value, options) => {  //options参数会自动放置在参数列表最后一个，保存一些模板内部成员
  let valueR, ret;
  if (!options.props.useUnless) {  //#customIf标签的useUnless参数，使用options.props.paramName的方式获取
    valueR = !!value;  //"value"即为插值变量"{{value.trim()}}"的执行结果
  } else {
    valueR = !!!value;
  }

  if (valueR) {
    ret = options.result();  //输出标签的子节点，即"test if"
  }
  else {
    ret = options.props['else'];  //输出<#else>的子节点，即"test else"
  }

  return ret;
});

• 可以一次定义多个全局标签：

nj.registerExtension({
  customIf: (val, option) => {...},
  customSwitch: (val, option) => {...}
});

局部标签

• 还可以使用局部标签，将标签函数定义为插值变量即可：

nj`
<#customIf {{true}}>
  test if
</#customIf>`({
  customIf: (val, option) => {...}
});

NornJ可以利用局部标签的特性，来为一些实际场景提供代码逻辑与结构的分离，例如这个Ant Design表单验证组件的例子。

标签内部的options参数

• 注册标签函数的最后一个参数即为options参数，它是一个对象类型。从options中可以获取到模板内部的一些值，主要用于实现一些复杂的模板扩展功能，如下所示：

nj.registerExtension('customIf', (value, options) => {
  const ctx = options.context;
  console.log(ctx.getData('id'));   //输出100
  console.log(ctx.data[0]);         //输出1
  console.log(ctx.parent.data[0]);  //输出{ list: [1] }
  console.log(ctx.index);           //输出0

  if (value) {
    return options.result();  //输出0
  }
});

nj`
<#each {{list}}>
  <#customIf {{this > 0}}>
    {{@index}}
  </#customIf>
</#each>
`({ list: [1] }, { id: 100 });

options参数列表(更多参数及细节待补充)：

内置标签

• 具体请看内置标签。