ISML到lit-html

Question

我在将ISML-Templates重写为I html时遇到了困难。

例如：

<isset name="Variable" value="${pdict.variable}" scope="page" />

isml标签<isset>在lit-html中是如何工作的？

Answer 1

Lit HTML使用常规的HTML。您可以定义任何想要的自定义元素，但<isset>既不是标准元素，也不是自定义元素。这意味着，<isset>元素不能与lit-HTML本身一起工作，相反，lit-html接受您的模板并使用它高效地更新DOM。如果您在解析呈现的<isset>元素的页面上有一些其他代码，这是很好的，您可以使用If html来呈现它们。

it -html将在您编写节点时呈现节点，尽管它会将自关闭标记转换为普通标记。

​

(async function() {

  const { render, html } = await import("https://unpkg.com/lit?module");

  function issets(items) {
    return items.map(({ name, value }) => html`<isset name="${name}" value="${value}"/>`);
  }
  
  render(issets([
    { name: 'a', value: 1 },
    { name: 'b', value: 2 }
  ]), document.querySelector('output'));
  
  console.log(document.querySelector('output').innerHTML)
  
})();

<output></output>

​

渲染输出：

<!----><!----><isset name="a" value="1"></isset><!----><!----><isset name="b" value="2"></isset><!---->