Séparer les fichiers de modèle pas rendu à l'aide de la dorsale et le trait de soulignement

En utilisant 

<script type="text/template" id="templateid">
<!-- Template content goes here -->
</script>

le code fonctionne bien.

Cependant, si j'ai mis le modèle dans un fichier externe comme

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

cela ne marchera pas.

Quelle est la différence entre ces deux méthodes et aussi comment puis-je résoudre ce problème? Ou ai-je raté quelque chose ici qui est peut-être évident?

  • Qu'entendez-vous par "ne fonctionne pas"? Ce qui se passe quand vous l'essayez, et en quoi cela diffère de ce que vous attendez?
  • Bonjour Guffa, Quand j'ai séparé le script contenu dans un fichier et l'appel à l'aide src="url_to_file.js" ensuite, le modèle ne sera pas rendu. Mais si je jus de copier coller le contenu à l'intérieur de la balise script dans la même page, le modèle de rendu avec toutes les valeurs..
InformationsquelleAutor Roy M J | 2013-06-26
  1. 10

    Si vous êtes tout simplement essayer d'obtenir le modèle de texte en utilisant quelque chose comme la $("#templateid").html() à partir de différents exemples, cela ne fonctionne que si le texte est vraiment en ligne dans le <script> tag.

    En général, il n'est pas possible d'obtenir le contenu d'un fichier distant en utilisant un <script> tag.

    Si vous souhaitez charger un externe modèle, vous devez utiliser le code explicitement obtenir le contenu (par exemple, à l'aide de JQuery $.get() ou require.js avec le texte de l'extension).

    Voici plus de détails sur la façon de récupérer externe de modèles dans le contexte de la colonne vertébrale:

    Être prudent, cependant que la surutilisation de cette solution conduit à un grand nombre de demandes supplémentaires pour aller chercher des modèles, et plutôt lente application en conséquence. En général, il est préférable pour les performances à intégrer les modèles de la manière habituelle (inline dans <script> tags).

    InformationsquelleAutor Jakub Wasilewski
  2. 24

    Même si ive a accepté une autre réponse, je suis allé de l'avant et de mise en œuvre de cette exigence particulière en quelques manières différentes. Im affichant la meilleure méthode simple et que j'ai trouvé qui je pense sera utile pour les personnes qui ne souhaitez pas utiliser les moteurs de template comme des marionnettes ou donc.

    À l'aide de la Dorsale et de Souligner :

    Structure De Dossier

    La Structure de dossier peut être comme suit : 

    Root:
├───css
├───js
│   ├───router.js
│   ├───model.js
│   ├───view.js
│   └───config.js   
├───templates
│   ├───home.html
│   ├───login.html
│   └───register.html   
└───images
└───index.html

    Modèle De Base

    Vous aurez besoin d'avoir un modèle de base(index.html) au sein de laquelle vous sera rendu les différents modèles. Cela permettra d'assurer que le bon contenu html comme hearder, pied de page, menus de navigation, etc ne sont pas chargés à chaque fois une nouvelle page est affichée et d'augmenter ainsi la vitesse de chargement des pages de façon drastique.

    Structure d'échantillon peut être comme suit : 

    <html>
<head>
<!--Relevant CSS files-->
</head>
<body>
<div class="template_body">
    <div class="header">  
         <!--HTML content for header-->
    </div>
    <div class="content" id="template">
          <!--This would be where the dynamic content will be loaded-->
    </div>
    <div class="footer">
         <!--HTML content for footer-->
    </div>
</div>
<!--Include relevant JS Files-->
</body>
</html>

    Remarque : Veuillez notez que vous pouvez décider sur la structure du modèle que l'on veut. Ce que je suis en utilisant un cadre plus général afin que chacun puisse s'y rapportent facilement.

    Vue

    Dans votre vue, vous pouvez effectuer le rendu d'un modèle particulier pour le modèle de base comme suit : 

    var LoginView = Backbone.View.extend({
    el: "#template",//Container div inside which we would be dynamically loading the templates
    initialize: function () {
        console.log('Login View Initialized');
    },
    render: function () {
        var that = this;
        //Fetching the template contents
        $.get('templates/login.html', function (data) {
            template = _.template(data, {});//Option to pass any dynamic values to template
            that.$el.html(template);//adding the template content to the main template.
        }, 'html');
    }
});

var loginView = new LoginView();

    Noter que le el balise est très important.

    Pour transmettre des valeurs à afficher, il suffit de le passer comme : 

    var data_to_passed = "Hello";
$.get('templates/login.html', function (data) {
    template = _.template(data, { data_to_passed : data_to_passed }); //Option to pass any dynamic values to template
    that.$el.html(template); //adding the template content to the main template.
}, 'html');

    Et dans le modèle : 

    <%=data_to_passed;%>//Results in "Hello"

    Vous pouvez passer un tableau, un objet ou même une variable.

    Espère que cela vous a été utile. Cheers

    • Je pense que vous avez raté % dans votre dernier bloc de code. Il devrait être <%=data_to_passed;%>
    • Ouais.. Raté.. Édité maintenant.. Merci beaucoup..
    InformationsquelleAutor Roy M J