comment créer et afficher externe modèle de page html à l'aide de Backbone.js?
Je suis très nouveau à backbone.js je suis pratiquant de modèles d'affichage dans ma "index.html' page.
J'ai créé un modèle dans 'index.html" et les afficher dans une aide de vue.Il fonctionne très bien avec un seul fichier html, c'est à dire tout est gardé dans "index.html'.Mais maintenant, je veux ces modèles à stocker dans un autre fichier et l'afficher dans mon "index.html'.
J'ai essayé de trouver une solution ,mais tous ont été source de confusion.
DONC, s'il vous plaît, quelqu'un peut me dire comment dois je faire.
Qui suit est mon modèle à afficher(actuellement dans un "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> Qui suit est un div dans lequel il est affiché(en même "index.html'):
<div class="tags" id="myTags"> </div><!--/tags--> et voici le script de la vue(dans le même fichier "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>Alors s'il vous plaît me suggérer des changements à faire pour faire de ce modèle externe .
Merci à advence . . .
Vous devez vous connecter pour publier un commentaire.
Façon la plus simple serait d'utiliser
underscore.jsqui est suggéré par backbone.js lui-même. Si vous voulez passer à une étape supérieure, alors vous pouvez aller pour la création de modèles de moteurs comme :et tant d'autres..
Personnellement, je préfère Soulignement.js. Un exemple serait comme suit :
À l'aide de trait de soulignement :
Comme pour l'extension à votre code :
App.baseUrl- Mon chemin d'accès complet à la racine du projet qui est défini comme config. Vous pouvez soit resuse ce ou de supprimer cette. Mais assurez-vous, vous pointez sur l'exact modèle de dossier.Vous devez spécifier votre
elbalise, sinon vous auriez besoin de coder en dur la div, vous devez vous concentrer pour rendre le modèle.Acclamations
- Je fixer mon compilé des modèles à l'objet lui-même. Vous pouvez ajouter des modèles supplémentaires pour le template principal
.Finalement j'ai trouvé la solution à mon problème, après avoir passé 2 jours à créer et d'affichage externe des modèles dans ma "index.html' page à l'aide de backbone.js.
Pour cela j'ai utilisé le trait de soulignement js.
Voici le processus que j'ai suivi pour exécuter mon application:
j'ai suivi le tutoriel mentionné dans cette vidéo.
J'ai créé un fichier de template séparé appelé "CloudTagTemplate.html" et collé le code html mentionné dans la question ci-dessus dans ce fichier et enregistré dans le dossier de Modèles où je vais pour stocker d'autres modèles plus tard:
mon CloudTagTemplate.html:
Puis j'ai créé un CloudTagView.js en Vue de Dossier:
mon CloudTagView.js:
noter que -
est important de mettre là-bas ,puisque nous sommes la définition de fonction anonyme $.get()
et enfin j'ai relié tous ces fichiers requis dans ma "index.html" comme:
et enfin il a bien fonctionné comme je le voulais. .
Merci à @Roy M J