是否有可能將Template7代碼放在一個單獨的文件而不是HTML中

我正在使用一個名爲Framework7的框架。是否有可能將Template7代碼放在一個單獨的文件而不是HTML中

在我的index.html，我有一些Template7代碼，像這樣的格式

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

不過，我想有這部分代碼爲彼此分開的文件（就像我可以有很多其他* .js文件，比方說，一個靜態的文件夾，並通過「靜態/ *。js的參考文件）。

文件，我曾嘗試使用一個典型的以進口方式JS

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

但它不」 t工作，也有n o文檔中的演示/示例代碼。

任何幫助表示讚賞！

來源

2016-07-27 SonicC

可以在.js文件中定義模板。該模板只需要是一個字符串。請參閱本[的jsfiddle（https://jsfiddle.net/timverwaal/hxetm9rc/），並注意「模板1」和「模板2」

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

template1只是提取<script>的內容並把它在一個字符串之間的區別。 template2直接定義字符串

來源

2016-07-27 11:30:08

這是否意味着它不可能或很難有那些模板代碼爲html格式的另一個HTML文件？ – SonicC

您是否考慮過使用服務器端編碼？例如，使用PHP，可以將HTML代碼放在不同的PHP文件中。我們這種方法可以同時具備以下兩種模式：（1）HTML格式的模板和（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的負載似乎有相同的缺陷。

於是我想出了方法號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; 
}

來源

2016-08-26 14:08:25 user732456

如何延遲加載，並通過處方插入？

(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)) })

來源

2017-12-08 13:41:28

是否有可能將Template7代碼放在一個單獨的文件而不是HTML中

回答

相關問題