Возможно ли положить шаблон 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/) и обратите внимание на разницу между «template1» и «» template2

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

После создания своего проекта для КСН я узнал, что импорт связь не поддерживается всеми браузерами, пока я не смог заставить его работать на 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

ответ

Смежные вопросы