更改后在 html 中设置模板

Question

我有下一个方法如何编译和设置 DOM 我的 html:

export function initHTMLOperator(container) {
    if (container.template) {
        const template =  SF.handlebars.compile(container.template);
        const html = template(container);
        const elem = document.getElementsByTagName(container.id)[0];
        elem.innerHTML = html; // set compiled template
    }
}

container.template 有模板
container - 它是带有模板变量的对象。

编译后我在DOM中设置了html。

但是我在更改输入时遇到问题，我重新编译模板并失去焦点。

是否可以在没有 innerHTML 的情况下更新 DOM 中的模板？我的意思是更新模板但未设置完整 html，仅更改。

Answer 1

你想要的是像 react 而不是 handlebars 这样的东西，那么你应该使用虚拟 DOM 并且只应用更改，但 handlebars 不提供这样的功能。所以不，如果你想要你的新模板，那么你必须用 innerHTML 之类的东西替换整个内容。但是，如果唯一的问题是失去焦点，您可以在替换内容之前保存它，并在替换模板后重置焦点。

更改后在 html 中设置模板

Set template in html after changes

handlebars.js