是否可以将 Template7 代码放在单独的文件中而不是 html

Question

我正在使用一个名为 Framework7 的框架。

在我的 index.html 中，我有一些 Template7 代码，像这样的格式

<script type="text/template7" id="commentsTemplate">
    {{#each this}}
    <div> test this template 7 code </div>
</script>

但是，我想将这部分代码放入另一个单独的文件中（就像我可以将许多其他 *.js 文件放在静态文件夹中并通过“static/*.js”引用该文件一样）。 js).

我试过用典型的方式导入js

<script type="text/template7" id="storiesTemplate" src="js/template.js"></script>

但是不行，文档中也没有demo/sample代码。

感谢任何帮助！

Answer 1

可以在 .js 文件中定义模板。模板只需要是一个字符串。参考这个 [JSFiddle] (https://jsfiddle.net/timverwaal/hxetm9rc/) 并注意 'template1' 和 'template2'

之间的区别

var template1 = $$('#template').html();
var template2 = '<p>Hello, my name is still {{firstName}} {{lastName}}</p>'

template1 只是提取 <script> 的内容并将其放入字符串中。 template2直接定义字符串

Answer 2

你可以的。背后的想法是在 HTML 文件中包含一个 HTML 文件。我至少可以说出这可能发生的三种方式，但我个人只完全验证了第三种。

首先有一个jQuerynext sample is taken from this thread

a.html:

   <html> 
   <head> 
        <script src="jquery.js"></script> 
        <script> 
            $(function(){
                $("#includedContent").load("b.html"); 
            });
        </script> 
   </head> 
   <body> 
        <div id="includedContent"></div>
   </body> 
   </html>

b.html:

<p> This is my include file </p>

另一种解决方案，我在这里找到并且不需要 jQuery 但仍未经过测试：there is a small function
我的解决方案是纯粹的 HTML5，旧浏览器可能不支持，但我不关心它们。

在你的 html 的头部添加，link 使用模板 html 添加到你的

    <link rel="import" href="html/templates/Hello.html">

在 Hello.html 中添加您的模板代码。比使用这个效用函数：

    loadTemplate: function(templateName)
    {
        var link = document.querySelector('link[rel="import"][href="html/templates/' + templateName + '.html"]');
        var content = link.import;
        var script = content.querySelector('script').innerHTML || content.querySelector('script').innerText;
        return script;
    }

最后，在需要的地方调用函数：

    var tpl = mobileUtils.loadTemplate('hello');
    this.templates.compiledTpl = Template7.compile(tpl);

现在您已经编译好了模板，可以使用了。

=======更新

在为 ios 构建我的项目后，我发现 link 导入还不受所有浏览器的支持，我无法使其在 iphone 上运行。所以我尝试了方法 2。它有效，但正如您可能看到的那样，它发出了我不喜欢的 get 请求。 jquery load好像也有同样的不足

所以我想出了方法 4。

<iframe id="iFrameId" src="html/templates/template1.html" style="display:none"></iframe>

现在我的 loadTemplate 函数是

loadTemplate: function(iframeId, id)
{
    var iFrame = document.getElementById(iframeId);
    if ( !iFrame || !iFrame.contentDocument ) {
        console.log('missing iframe or iframe can not be retrieved ' + iframeId);
        return "";
    }

    var el = iFrame.contentDocument.getElementById(id);
    if ( !el ) {
        console.log('iframe element can not be located ' + id );
        return "";
    }

    return el.innerText || el.innerHTML;
}

Answer 3

通过方子懒加载插入怎么样？

    (function (Template7) {
    "use strict";
    window.templater = new function(){
        var cache = {};

        var self = this;

        this.load = function(url)
        {
            return new Promise(function(resolve,reject)
            {
                if(cache[url]){
                    resolve(cache[url]);
                    return true;
                }

                if(url in Template7.templates){
                    resolve(Template7.templates[url]);
                    return true;
                }

                var xhr = new XMLHttpRequest();
                xhr.open('GET', url);
                xhr.onload = function() {
                    if(this.status == 200 && this.response.search('<!DOCTYPE html>') == -1){
                        cache[url] = Template7.compile(this.response);
                        resolve(cache[url]);
                    }else{
                        reject(`Template ${url} not found`);
                    }
                };
                xhr.send();
            })
        }

        this.render = function(url, data)
        {
            return self.load(url)
                .then(function(tpl){
                    return tpl(data) ;
                });
        } 

        this.getCache = function()
        {
            return cache;
        }

    }
})(Template7);

使用：

templater.render('tpl.html').then((res)=>{ //res string })

或者：

templater.load('tpl.html').then( tpl => { Dom7('.selector').html( tpl(data) ) } )

是否可以将 Template7 代码放在单独的文件中而不是 html

Is that possible to put Template7 code in a separate file rather than in html

javascript

html

module

frontend

html-framework-7