Comprendre comment utiliser exiger js combinée avec du texte js pour charger des modèles html à l'intérieur d'un squelette d'application

Je suis en train d'apprendre backbone js, essayer de faire un petit projet.

Dans le de te page, je charge require.js et text.js depuis le CDN cloudflare

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.8/require.min.js">//</script>

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/require-text/2.0.10/text.js">//</script>

J'ai fait une épine dorsale de vue appelé "Boîtes":

var Boxes = Backbone.View.extend({

        //Choose an element.
        el : '.content',

        render : function () {

            //Captur "this" -> the backbone view itself.
            var that = this;

            $(this.el).html('how do I load a html template here?');

        }
    });

Problèmes:

  1. Lorsque j'ajoute le text.js plugin pour la page, j'obtiens l'erreur suivante:

    Incompatibles anonyme define() module: fonction (module) { 'use strict'; ......

Donc je ne peux pas avoir la require.js et la text.js à la fois chargé, il me donne l'erreur ci-dessus, même sur une page blanche, sans d'autres scripts sur elle.

  1. Fois que j'ai le besoin de js travailler avec du texte js, comment puis-je charger un modèle html de ce point de vue?

Droit maintenant, je sais comment le faire quand j'écris mes modèles à la volée, dans le index.html page.

Je fais comme ça:

var Boxes = Backbone.View.extend({

    el : '.content',

    render : function () {

        var that = this; //This backbone view

        var template = _.template($('#user-list-template').html(), {});

        that.$el.html(template);
    }
});

Merci!

OriginalL'auteur Dany D | 2013-10-22

  1. 13

    Dans votre fichier HTML, il vous suffit de charger requrejs comme indiqué dans ce index.html

    <script type="text/javascript" data-main="js/main" src="js/libs/require-2.1.2.min.js"></script>

    Ci-dessus, les données "principal" raconte requirejs où à charger son fichier de bootstrap et dans ce cas, il est sous "js/main.js"

    Vous pouvez trouver le fichier dans ici.

    Dans le main.js fichier, vous devez spécifier

    require.config({ ... });

    pour configurer requirejs.

    Après cela, vous pouvez utiliser le bouton "définir () ou require()" pour charger les modèles comme...

    define(['text!../../templates/app/content.about.html'],...);

    Voir ici pour un exemple complet.

    Je suis surpris que ce genre d'information n'est pas clairement indiqué dans le require.js de la documentation.
    Il semble que le texte plugin ne peut pas être chargé à partir d'un CDN. En cours d'exécution dans le exact même problème, et malheureusement le texte plugin doit être hébergé localement par rapport au script principal.

    OriginalL'auteur Ming Chan

  2. 6

    Lorsque vous utilisez require.js, vous utilisez uniquement une balise script dans votre page. Tout le reste est chargé par Require.js.

    D'utiliser un plugin, vous pourrez le configurer dans un require.config

    require.config({
    paths: {
        text: "path/to/text"
    }
});

    Ensuite dans vos modules, il vous suffit de l'appeler:

    define([
    "text!path/to/tpl"
], function( tplString ) {

});

    Noter cependant que si vous êtes à la gestion des modèles, le mieux serait de charger le modèle de pré-compilé. Texte plugin uniquement retourner une chaîne de caractères, ce n'est pas très bon pour l'optimisation et à force de répéter le modèle de compilation logique. Vous devez utiliser un modèle de chargeur de plugin, pour le trait de soulignement/lodash micro-modèle, je vous recommande celui-ci: https://github.com/tbranyen/lodash-template-loader

    Si vous voulez un exemple d'une application à l'aide de Require.js et de la colonne vertébrale, vous devriez vraiment vérifier épine Dorsale Standard: https://github.com/backbone-boilerplate/backbone-boilerplate

    Épine dorsale Standard est une bonne façon de configurer votre projet plus rapidement en utilisant les meilleures pratiques autour de l'épine Dorsale du développement. En Plus, c'utilisation AMD largement, de sorte que vous aurez un travail de réglage si c'est votre première fois autour.

    votre réponse est source de confusion. suggérez-vous qu'il y a un plugin de texte que l'on devrait utiliser pour l'utilisation des modèles ?
    Le texte plugin est une exigence du modèle de plugin, mais en utilisant le modèle de plugin est généralement "mieux", car il peut mettre en cache le modèle compilé pour la réutilisation, au lieu de les recompiler à partir d'une chaîne à chaque fois.

    OriginalL'auteur Simon Boudrias