wie zu erstellen und display externe Vorlage in html-Seite mit Backbone.js?
Ich bin ganz neu backbone.js ich bin beim üben des display templates in mein 'index.html' Seite.
Ich habe eine Vorlage erstellt, in der In 'index.html' und die Anzeige in einer view.Es funktioniert gut mit einzelne html-Datei, also alles aufbewahrt wird, in 'index.html'.Aber jetzt will ich diese Vorlagen zu speichern in einer anderen Datei und der Anzeige in mein 'index.html'.
Ich habe versucht, eine Lösung zu finden ,aber alle waren verwirrend.
ALSO bitte, kann mir jemand sagen, wie sollte ich es tun.
Folgende ist meine Vorlage zu sehen sein(derzeit in einem "index.html'):
<script type="text/template" id="cloudtag_tempalte">
<center>
<ul class="cld" ">
<li > <a class="tag1" id="t1" href="https://www.google.com" target="_blank"></a> </li>
<li > <a class="tag2" id="t2" href="#">sachin </a> </li>
<li > <a class="tag3" id="t3" href="#">Ramesh </a> </li>
<li > <a class="tag1"id="t33" href="#">Tendulkar</a></li>
<li > <a class="tag5"id="t34" href="#">Cricket</a></li>
<li > <a class="tag2"id="t35" href="#">Test</a></li>
</ul><!--/cld-->
</center>
</script> Folgenden ist ein div, in dem es angezeigt wird(im gleichen 'index.html'):
<div class="tags" id="myTags"> </div><!--/tags--> und folgenden script der view(in der gleichen Datei 'index.html'):
<script type="text/javascript">
var cld_view=Backbone.View.extend({
initialize: function(){
},
render: function(){
//Compile the template using underscore
var template = _.template( $("#cloudtag_tempalte").html(), {} );
//Load the compiled HTML into the Backbone "el"
this.$el.html( template );
}
});
var cloudtag=new cld_view({el:$("#myTags")});
cloudtag.render();
</script>Also bitte, schlagen Sie mich, die änderungen vorgenommen werden, um diese Vorlage externe .
Danke im advence . . .
InformationsquelleAutor sachin_ware | 2013-11-11
Du musst angemeldet sein, um einen Kommentar abzugeben.
Einfachste Weg wäre, um
underscore.jswas vorgeschlagen backbone.js selbst. Wenn Sie möchten, gehen Sie einen Schritt höher, dann könnten Sie gehen für templating-engines wie :und so viele andere..
Persönlich bevorzuge ich Unterstrich.js. Ein Beispiel wäre wie folgt :
Mit Unterstrich :
Als für die Ausweitung auf den code :
App.baseUrl- Meine kompletten Pfad des Projektes an die Wurzel wird als config. Sie können entweder resuse diese oder entfernen Sie diese. Sondern nur sicherstellen, dass Sie auf den exakten template-Ordner.Müssen Sie Ihre
eltag, sonst würden Sie brauchen, um hart-code des div-Sie konzentrieren sich zum Rendern der Vorlage.Cheers
Es ist immer gut zu trennen js & css aus dem html.. :)... Einfach aus Neugier, sind Sie nicht durch die Trennung von Ihrem view -, Modell -, Inkasso -, router-code in separate js-Dateien??
InformationsquelleAutor Roy M J
Lege ich meine kompilierte Vorlagen auf das Objekt selbst. Sie können den anfügen extra Vorlagen an den Haupt-template
InformationsquelleAutor jax
.Endlich fand ich die Lösung zu meinem problem nach dem Kampf 2 Tage Erstellung und Anzeige von externen Vorlagen in mein 'index.html' Seite mit backbone.js.
Für die, die ich verwendet, Unterstrich js.
Hier ist der Prozess, der folgte ich erfolgreich meine Anwendung:
ich folgte dem tutorial erwähnt in dieses video.
Ich eine separate template-Datei namens "CloudTagTemplate.html' und eingefügt, den html-code in der obigen Frage in dieser Datei gespeichert und im Ordner Templates, wo ich werde zu speichern von anderen Vorlagen später:
meine CloudTagTemplate.html:
Dann erstellte ich eine CloudTagView.js im Ordner Anzeigen:
meine CloudTagView.js:
beachten Sie, dass -
ist wichtig, da drüben ,da definieren wir die anonyme Funktion $.get()
endlich, ich Verband alle diese benötigten Dateien in meinem 'index.html' als:
- und schließlich es funktionierte, wie ich wollte. .
Vielen Dank an @Roy M J
InformationsquelleAutor sachin_ware