Ist es möglich, Template7 Code in eine separate Datei statt in HTML

zu setzen, verwende ich ein Framework namens Framework7.Ist es möglich, Template7 Code in eine separate Datei statt in HTML

In meinem index.html, habe ich einige Vorlage7 Code, wie dieses Format

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

Allerdings möchte ich diesen Teil des Codes haben in eine andere getrennte Datei (Genau wie ich viele andere haben kann * Js-Dateien in, sagen wir, einem statischen Ordner und beziehen sich auf die Datei durch „static/*. js).

ich habe versucht, eine typische Art und Weise zu verwenden, js

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

zu importieren, aber es doesn‘ t Arbeit, da ist auch n o Demo/Beispielcode in der Dokumentation.

Jede Hilfe wird geschätzt!

Quelle

2016-07-27 SonicC

Es ist möglich, Ihre Vorlagen in .js-Dateien zu definieren. Die Vorlage muss nur eine Zeichenfolge sein. Siehe dieses [JSFiddle] (https://jsfiddle.net/timverwaal/hxetm9rc/) und den Unterschied zwischen 'template1' beachten und 'template2' extrahiert

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

template1 nur den Inhalt des <script> und setzt sie in einen String. template2 definiert direkt die Zeichenfolge

Quelle

2016-07-27 11:30:08

Bedeutet es, dass es unmöglich oder schwer jenen Template-Code als HTML-Format in einer anderen HTML-Datei zu haben? – SonicC

Haben Sie in Erwägung gezogen, die serverseitige Codierung zu verwenden? Mit PHP ist es beispielsweise möglich, den HTML-Code in separate PHP-Dateien zu stellen. Bei diesem Ansatz können Sie beides haben, (1) die Vorlagen im HTML-Format und (2) separate Dateien für Ihre Vorlagen ... –

Sie können es tun. Die Idee dahinter ist, eine HTML-Datei in eine HTML-Datei aufzunehmen. Ich kann mindestens 3 Wege sagen, dass dies passieren kann, aber persönlich habe ich nur die dritte validiert.

Zuerst gibt es eine 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>

Eine andere Lösung, die ich hier gefunden und nicht erfordern jQuery, aber es ist noch nicht getestet: there is a small function
Meine Lösung ist ein reines HTML5 und wird wahrscheinlich nicht in den alten Browsern unterstützt, aber ich interessiere mich nicht für sie.

in dem Kopf Ihres html, Link zu Ihren html hinzufügen mit Vorlage

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

in hello.html Ihren Template-Code hinzufügen. Als diese Funktion Dienstprogramm verwenden:

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; 
    }

Schließlich rufen Sie die Funktion, wo Sie es brauchen:

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

Jetzt haben Sie zusammengestellt Vorlage bereit, verwendet werden.

======= UPDATE

Nach meinem Projekt für ios Gebäude fand ich heraus, dass Link Import nicht von allen Browsern noch unterstützt wird und ich nicht, um es auf dem iPhone funktioniert. Also habe ich Methode Nummer 2 versucht. Es funktioniert, aber wie Sie vielleicht sehen, macht es Anfragen bekommen, die ich nicht mochte. Jquery Load scheint den gleichen Mangel zu haben.

So kam ich mit Methodennummer aus 4.

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

und jetzt meine Funktion Loadtemplate ist

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; 
}

Quelle

2016-08-26 14:08:25 user732456

Wie wäre es verzögertes Laden und Einfügen durch die Vorschriften?

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

Verwendung:

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

Oder:

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

Quelle

2017-12-08 13:41:28

Ist es möglich, Template7 Code in eine separate Datei statt in HTML

Antwort

Verwandte Themen