Zkoss开发zhtml文件使用template模板不生效如何解决

根因分析 #

zhtml解析逻辑中，原生HTML5的<template>标签优先级高于ZK同名Shadow组件，你代码中书写的<template>会被识别为普通HTML模板标签，ZK无法读取其内容作为children绑定的渲染模板。找不到匹配模板时，ZK会默认将集合中的字符串元素渲染为z-label组件，也就是你看到的<span>标签。

修复步骤 #

1. 声明ZK命名空间前缀 #

修改zhtml的根标签，显式为ZK zul命名空间声明前缀，避免和原生HTML标签冲突：

<x:html xmlns="http://www.zkoss.org/2005/zul"
        xmlns:z="http://www.zkoss.org/2005/zul"
        xmlns:x="xhtml"
        src="/components/public-page-template.html">

2. 为template标签添加命名空间前缀 #

将原有的<template>标签改为带z:前缀的形式，明确指定为ZK模板组件：

<div viewModel="@id('vm') @init('TestViewModel')">
  <!-- 这里也可以把@init改为@load，兼容后续集合动态更新的场景 -->
  <div children="@load(vm.testList)">
    <z:template name="children">
      <checkbox label="@load(each)"/>
    </z:template>
  </div>
</div>

修改完成后重新测试，即可正常渲染3个checkbox组件。

内容的提问来源于stack exchange，提问作者Арсен Мирзаян