Question

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

在我的index.html中，我有一些Template7代码，比如这种格式

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

但是，我希望将这部分代码放入另一个单独的文件中（就像我可以在静态文件夹中包含许多其他* .js文件一样，通过＆＃34来引用该文件;静态/ *的.js）。

我试图使用一种典型的方式导入js

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

但它不起作用，文档中也没有演示/示例代码。

感谢任何帮助！

Answer 1

可以在.js文件中定义模板。模板只需要一个字符串。请参阅[JSFiddle]（https://jsfiddle.net/timverwaal/hxetm9rc/）并注意＆＃39; template1＆＃39;和＆＃39; template2＆＃39;

<dependency>
    <groupId>org.glassfish.jersey.containers</groupId>
    <artifactId>jersey-container-servlet</artifactId>
    <version>2.22.1</version>
</dependency>
<dependency>
    <groupId>org.glassfish.jersey.media</groupId>
    <artifactId>jersey-media-json-jackson</artifactId>
    <version>2.23.1</version>
</dependency>

var template1 = $$('#template').html(); var template2 = '<p>Hello, my name is still {{firstName}} {{lastName}}</p>'只提取template1的内容并将其放入字符串中。 <script>直接定义字符串

Answer 2

你可以做到。背后的想法是在HTML文件中包含HTML文件。我可以告诉至少3种方法可以实现，但我个人完全只验证了第三种方式。

首先是jQuery next 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的头部，链接到带有模板的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);

现在您已准备好使用的编译模板。

======= UPDATE

在为ios构建我的项目后，我发现所有浏览器都不支持链接导入，但我无法在iphone上运行。所以我尝试了方法编号2.它可以工作，但正如你可能会看到它会产生请求，我不喜欢。 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中

3 个答案: