pl-template元件

以可重用的方式显示小胡子模板中的样板 HTML。

样品元素

question.html

<pl-template file-name="templates/outer_template.mustache">
  <pl-variable name="show">True</pl-variable>
  <pl-variable name="section_header">This is the section header.</pl-variable>
  <pl-variable name="section_body">This is the section body.</pl-variable>
</pl-template>

除了元素的示例用法之外，我们还提供了一个示例模板文件。这是文件 templates/outer_template.mustache，存储在课程的serverFilesCourse目录中：

templates/outer_template.mustache

<div class="card mb-1 mt-1">
  <div class="card-header" style="cursor: pointer">
    <div
      class="card-title d-flex justify-content-between"
      data-bs-toggle="collapse"
      data-bs-target="#collapse-{{uuid}}"
    >
      <div>{{section_header}}</div>
      <div class="fa fa-angle-down"></div>
    </div>
  </div>

  <div class="collapse{{#show}} show{{/show}}" id="collapse-{{uuid}}">
    <div class="card-body">
      <div class="card-text">{{{section_body}}}</div>
    </div>
  </div>
</div>

Note

示例元素未定义 uuid 变量，因为每个 pl-template 元素 有一个内部定义的唯一的。

定制

属性	类型	默认	描述
directory	"question"、"clientFilesQuestion"、"clientFilesCourse"、"serverFilesCourse"、"courseExtensions"	"serverFilesCourse"	找到 file-name 的父目录。
file-name	字符串	—	要使用的外部模板的文件名。
log-tag-warnings	布尔	真实	如果呈现的模板包含不能保证正常工作的元素，是否记录警告。
log-variable-warnings	布尔	假	渲染具有未定义变量的模板时是否记录警告。对于调试很有用。

在 pl-template 元素内部，可以使用 pl-variable 标签指定用于渲染模板的变量。每个 pl-variable 标签均可用于使用文件中的数据或标签的内容（但不能同时使用两者）来定义变量。请注意，替换不应用于 pl-variable 中使用的外部文件（文件按原样使用）。 pl-variable 标签支持以下属性：

属性	类型	默认	描述
directory	"question"、"clientFilesQuestion"、"clientFilesCourse"、"serverFilesCourse"、"courseExtensions"	"serverFilesCourse"	找到 file-name 的父目录。
file-name	字符串	—	从文件中获取变量数据时使用的文件名。
name	字符串	—	用于分配此标签定义的数据的变量名称。
trim-whitespace	布尔	真实	是否修剪此标签指定的数据的空白。

细节

由于 ZJUI-Learn 中元素的呈现方式，模板应仅包含其他装饰元素。特别是，在此元素中使用的接受和/或评分学生输入的元素将无法正常工作。 渲染模板时，data["params"] 和 data["preferences"] 中的所有条目都作为可用变量包含在内，并且可以在渲染模板时使用 {{params.variable_name}} 或 {{preferences.variable_name}} 语法。 pl-template 元素的每个实例还具有可用于渲染的唯一 uuid 变量。模板也可以在其他模板中使用。

Note

id # CSS 选择器对以数字开头的 id 不起作用，因此 uuid 应该加上前缀（因为它们可能以数字开头）。

示例实现

• [元素/模板]

---