Question

我构建了一个与许多屏幕结合在一起的Web应用程序，我希望每次都加载其中的一部分。所以我使用数据对象和html标记。但是由于我加载了许多模板，所以我希望将html数据解析为小型html文件，当webapp需要它们时将读取它们。

const customer = {
    name: 'john doe',
    title: 'Web Developer',
    city: 'NY'
}

const markup = `
 <div class="customer">
    <h2>
        ${customer.name}
    </h2>
    <p class="location">${customer.location}</p>
    <p class="title">${customer.title}</p>
 </div>
`;

我真正想要的是标记html将从外部文件中获取

所以我试图通过调用ajax并将html保存为变量来获取模板字符串，但似乎无法解析模板文字

任何帮助将不胜枚举

Answer 1

嗯，HTML中没有内置数据绑定，而Angular等框架提供了该功能。但是，如果您想保持香草味，则可以使用以下内容：

const customer = {
    name: 'john doe',
    title: 'Web Developer',
    city: 'NY'
}

const markupFromExternalFile = `
 <div class="customer">
    <h2>
        {customer.name}
    </h2>
    <p class="location">{customer.city}</p>
    <p class="title">{customer.title}</p>
 </div>
`

const regex = /\{(.*?)\}/g

let finalMarkup = markupFromExternalFile
const changes = finalMarkup.matchAll(regex)

while(true) {
  const change = changes.next()
  if(change.done) break
  const [replacement, prop] = change.value
  finalMarkup = finalMarkup.replace(replacement, customer[prop.split('.').pop()])
}

console.log(finalMarkup)

在这里，请确保您在HTML标记中的属性名称与您要从中拾取对象的对象的属性名称匹配。

如何在外部html文件中使用es6模板文字

1 个答案: