Modèle externe dans Underscore

Question

J'utilise Modèle de soulignement . Il est possible de joindre un fichier externe comme modèle ?

Dans la vue Backbone, j'ai :

 textTemplate: _.template( $('#practice-text-template').html() ),

 initialize: function(){                                            
  this.words = new WordList;            
  this.index = 0;
  this.render();
 },

Dans mon html est :

<script id="practice-text-template" type="text/template">
   <h3>something code</h3>
</script>

Il fonctionne bien. Mais J'ai besoin d'un modèle externe . J'essaie :

<script id="practice-text-template" type="text/template" src="templates/tmp.js">

ou

textTemplate: _.template( $('#practice-text-template').load('templates/tmp.js') ),

ou

$('#practice-text-template').load('templates/tmp.js', function(data){ this.textTemplate = _.template( data ) })

mais cela n'a pas fonctionné.

Answer 1

Voici une solution simple :

var rendered_html = render('mytemplate', {});

function render(tmpl_name, tmpl_data) {
    if ( !render.tmpl_cache ) { 
        render.tmpl_cache = {};
    }

    if ( ! render.tmpl_cache[tmpl_name] ) {
        var tmpl_dir = '/static/templates';
        var tmpl_url = tmpl_dir + '/' + tmpl_name + '.html';

        var tmpl_string;
        $.ajax({
            url: tmpl_url,
            method: 'GET',
            dataType: 'html', //** Must add 
            async: false,
            success: function(data) {
                tmpl_string = data;
            }
        });

        render.tmpl_cache[tmpl_name] = _.template(tmpl_string);
    }

    return render.tmpl_cache[tmpl_name](tmpl_data);
}

L'utilisation de "async : false" ici n'est pas une mauvaise solution car dans tous les cas vous devez attendre que le modèle soit chargé.

Donc, la fonction "rendre"

1. vous permet de stocker chaque modèle dans un fichier html distinct dans le répertoire statique statique
2. est très léger
3. compile et met en cache les modèles
4. abstrait la logique de chargement des modèles. Par exemple, à l'avenir, vous pourrez utiliser des modèles préchargés et précompilés.
5. est facile à utiliser

[Je modifie la réponse au lieu de laisser un commentaire car je pense que c'est important].

si les modèles ne s'affichent pas dans application native et vous voyez HIERARCHY_REQUEST_ERROR: DOM Exception 3 Voir la réponse de Dave Robinson à la question Qu'est-ce qui peut causer l'erreur "HIERARCHY_REQUEST_ERR : DOM Exception 3" ? .

En gros, vous devez ajouter

dataType: 'html'

à la requête $.ajax.

Answer 2

EDIT : Cette réponse est ancienne et périmée. Je la supprimerais bien, mais c'est la réponse "acceptée". Je vais injecter mon opinion à la place.

Je ne préconise plus de faire cela. À la place, je séparerais tous les modèles en fichiers HTML individuels. Certains suggèrent de les charger de manière asynchrone (Require.js ou une sorte de cache pour les modèles). Cela fonctionne bien sur les petits projets mais sur les gros projets avec beaucoup de modèles, vous vous retrouvez à faire une tonne de petites requêtes asynchrones au chargement de la page, ce que je n'aime vraiment pas. (ugh... ok, vous pouvez contourner cela avec Require.js en pré-compilant vos dépendances initiales avec r.js, mais pour les templates, cela me semble toujours erroné)

J'aime utiliser une tâche grunt (grunt-contrib-jst) pour compiler tous les modèles HTML dans un seul fichier templates.js et l'inclure. Vous obtenez le meilleur de tous les mondes, selon moi... les modèles sont dans un fichier, la compilation de ces modèles se fait au moment de la construction (et non de l'exécution), et vous n'avez pas cent petites requêtes asynchrones au démarrage de la page.

Tout ce qui est en dessous est de la camelote

Pour ma part, je préfère la simplicité d'inclure un fichier JS avec mon modèle. Ainsi, je peux créer un fichier appelé view_template.js qui inclut le modèle en tant que variable :

app.templates.view = " \
    <h3>something code</h3> \
";

Ensuite, il suffit d'inclure le fichier script comme un fichier normal et de l'utiliser dans votre vue :

template: _.template(app.templates.view)

En allant un peu plus loin, je en fait utiliser coffeescript, donc mon code ressemble plus à ceci et évite les caractères d'échappement de fin de ligne :

app.templates.view = '''
    <h3>something code</h3>
'''

Cette approche permet d'éviter d'introduire require.js là où il n'est pas vraiment nécessaire.

Answer 3

Ce mixin vous permet d'effectuer le rendu d'un modèle externe à l'aide de Underscore de manière très simple : _.templateFromUrl(url, [data], [settings]) . L'API de la méthode est presque la même que Underscore's _.template() . Mise en cache incluse.

_.mixin({templateFromUrl: function (url, data, settings) {
    var templateHtml = "";
    this.cache = this.cache || {};

    if (this.cache[url]) {
        templateHtml = this.cache[url];
    } else {
        $.ajax({
            url: url,
            method: "GET",
            async: false,
            success: function(data) {
                templateHtml = data;
            }
        });

        this.cache[url] = templateHtml;
    }

    return _.template(templateHtml, data, settings);
}});

Utilisation :

var someHtml = _.templateFromUrl("http://example.com/template.html", {"var": "value"});

Answer 4

Je ne voulais pas utiliser require.js pour cette simple tâche, j'ai donc utilisé la solution modifiée de koorchik.

function require_template(templateName, cb) {
    var template = $('#template_' + templateName);
    if (template.length === 0) {
        var tmpl_dir = './templates';
        var tmpl_url = tmpl_dir + '/' + templateName + '.tmpl';
        var tmpl_string = '';

        $.ajax({
            url: tmpl_url,
            method: 'GET',
            contentType: 'text',
            complete: function (data, text) {
                tmpl_string = data.responseText;
                $('head').append('<script id="template_' + templateName + '" type="text/template">' + tmpl_string + '<\/script>');
                if (typeof cb === 'function')
                    cb('tmpl_added');
            }
        });
    } else {
        callback('tmpl_already_exists');
    }
}

require_template('a', function(resp) {
    if (resp == 'tmpl_added' || 'tmpl_already_exists') {
        // init your template 'a' rendering
    }
});
require_template('b', function(resp) {
    if (resp == 'tmpl_added' || 'tmpl_already_exists') {
        // init your template 'b' rendering
    }
});

Pourquoi ajouter les modèles au document, plutôt que de les stocker dans un objet javascript ? Parce que dans la version de production, je voudrais générer un fichier html avec tous les modèles déjà inclus, de sorte que je n'aurai pas besoin de faire des demandes ajax supplémentaires. Et dans le même temps, je n'aurai pas besoin de faire de refactoring dans mon code, car j'utilise

this.template = _.template($('#template_name').html());

dans mes vues Backbone.

Answer 5

Je pense ce est ce qui pourrait vous aider. Tout dans cette solution tourne autour require.js qui est un chargeur de fichiers et de modules JavaScript.

Le tutoriel au lien ci-dessus montre très bien comment un projet de backbone pourrait être organisé. A exemple de réalisation est également fourni. J'espère que cela vous aidera.