时间戳

首页 > 解决方案 > 如何将 es6 模板文字与外部 html 文件一起使用

javascript - 如何将 es6 模板文字与外部 html 文件一起使用

问题描述

我构建了一个 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保存为变量来获取模板字符串，但它似乎没有解析模板文字

任何帮助将不胜感激

标签： javascript

解决方案

好吧，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 标记中的属性名称与从中获取它的对象的属性名称匹配。

推荐阅读