防止 <script> 标签内的模板在页面模板中执行

Question

我在我的应用程序中使用页面模板来保持美观和简洁，例如 {{> navbar}} 部分等。

我试图避免将每个模板都放在 index.html 中，但是将它们放置在使用它们的页面中可以做到这一点，这样当页面加载时，Template7 会尝试在标记和错误输出。

我是否遗漏了什么，或者我是否真的必须将每一个东西都放入我的索引文件？

Answer 1

您不必将所有内容都放入索引文件中 - 事实上，我的应用程序几乎没有任何内容。

您真正应该拥有的唯一东西是您始终需要展示或准备展示的东西（某种类型的主容器或菜单）。有时使用的或应该弹出的所有其他内容都是我用 javascript 创建的，如下所示：

function createRandomPage() {

    // Main container
    var randomPage = document.createElement('div');
    randomPage.className = "mainPages";
    var randomText = document.createElement('p');
    randomText.className = "mainPagesText";
    randomText.innerText = "Hello I'm a new page";
    randomPage.appendChild(randomText);

    // Destroys page when you move it off of the screen
    // Doing this avoids unnecessary memory usage
    randomPage.addEventListener('animationend', function() {
        if (randomPage.style.animationName == "removeRandomPage") {

            console.log("destroying random page");
            document.body.removeChild(randomPage);
        }
    });

    document.body.appendChild(randomPage);
}

Answer 2

最后我只是将我的模板放在一个目录中，每个文件一个，然后通过 AJAX 加载它们以将编译后的模板传递给回调。

function loadTemplate(name, callback) {
     $.get('templates/' + name + '.tpl', function(template) {
         callback(Template7.compile(template));
    });
}

防止 <script> 标签内的模板在页面模板中执行

Preventing templates inside <script> tags from being executed in page templates

cordova

html-framework-7