Backbone + RequireJS: Les fichiers HTML chargés avec RequireJS sont interprétés comme des fichiers JS

Question

Je souhaiterais déployer Backbone.js + Require.js. Je peux charger les modules très bien. Mais quand j'essaye de charger mes fichiers .html en utilisant le texte! plugin (text.js), je reçois ces erreurs:

ressources interprété comme script, mais transféré avec un type MIME text/html: "https://host.net/templates/login.html". require.js: 1843

Uncaught SyntaxError: jeton inattendu < login.html: 1

Uncaught TypeError: ne peut pas appeler la méthode 'remplacer' de underscore.js indéfinis: 1130

est ici les spécifications de ce que je travaille avec:

Browser: Chrome

côté serveur: PHP w/Slim

Machines: micro-exemple AWS avec bitnami AMI // Ce navire de choses avec défaut de production défini , donc il pourrait être possible qu'une configuration d'Apache ne soit pas correcte, ou qu'un php.ini ne soit pas correct. Je ne sais pas quoi.

Structure du répertoire:

/ 
    dev/ // Webroot: Behind basic_auth for dev reasons 
     web/ 
      index.php // Starts up the Slim router and PHP backend 
       app/ 
        app.html // The entry point for our SPA, data-main defined here 
     js/ // At root for module accessibility in case of reuse 
      apps/ 
      app/ 
       main.js // Here we do require.config and bootstrapping 
      app.js 
      router.js 
      text.js 
      modules/ 
       models/ 
        login.js 
       views/ 
        login.js 
      lib/ 
        backbone/ 
        backbone.js 
       jquery/ 
        jquery.js 
       require/ 
       require.js 
       underscore/ 
       underscore.js 
     templates/ // Also at root for access to reuseable markup, such as login.html 
     login.html 

Voici un code que je crois utile:

/js/apps/app/main.js

requirejs.config({ 
baseUrl: '/js/apps/app', 

    shim: { 
    'backbone' : { 
     deps: ['underscore', 'jquery'], 
     exports: 'Backbone' 
    }, 
    'underscore' : { 
     exports: '_' 
    }, 
    'jquery' : { 
     exports: '$' 
    }, 
    'backbone.ajaxcommands' : { 
     deps : ['backbone', 'underscore', 'jquery'], 
    } 
    }, 

    paths: { 
    jquery:  'lib/jquery/jquery-1.9.1.min', 
    underscore: 'lib/underscore/underscore', 
    backbone: 'lib/backbone/backbone-min' 
    }, 

    config: { 
    text: { 
     useXhr: function (url, protocol, hostname, port) 
     { 
     protocol = 'https'; 
    //  return true; 
     } 
    } 
    } 
}); 
require(['app'],function(App){ 
    App.initialize(); 
    App.start(); 
    } 
); 

/js/apps/app/modules/views/login.js

define([ 
    'backbone', 
    'underscore', 
    'modules/views/login', 
    'text!/templates/login.html' 
], function(Backbone, _, Login, loginTemplate){ 
    var LoginView = Backbone.View.extend({ 
    el: $("#login-form"), 

    events: { 
     "click #login": "login" 
    }, 

    template: _.template(loginTemplate), 

    initialize: function(){ 
     var self = this; 

     this.username = $("#username"); 
     this.password = $("#password"); 

     this.username.change(function(e){ 
     self.model.set({username: $(e.currentTarget).val()}); 
     }); 

     this.password.change(function(e){ 
     self.model.set({password: $(e.currentTarget).val()}); 
     }); 

    }, 

    login: function(){ 
     var user= this.model.get('username'); 
     var pword= this.model.get('password'); 
     if(this.model.save() == false) 
     { 
     console.log("We got issues loggin' in"); 
     } 
     else 
     { 
     console.log("We should have cookies now"); 
     } 
    } 

    //render: function(){ 
    // this.$el.append(this.template); 
    //} 
    }); 
    return LoginView; 
}); 

/templates/login.html

`<div>hi</div>` 

travail pour trouver la solution: Quand je regarde le débogueur Chrome, sous l'onglet 'réseau', je vois qu'en effet, login.html a été récupéré, mais chrome pense que c'est un fichier JS. J'ai parcouru le code en utilisant un point d'arrêt, et j'ai trouvé que dans Require.js 1843 l'objet nœud sur cette ligne a un attribut appelé 'outerHtml' égal à un '' tag avec un tas d'attributs. Alors peut-être que c'est envelopper mon code HTML dans un tag? Lorsque je regarde sous l'onglet aperçu dans l'onglet réseau du débogueur, je vois en effet le balisage. Si login.html a un code js valide, je n'obtiens pas l'erreur de syntaxe. J'obtiens toujours l'erreur underscore.js parce que c'est html malformé cependant.

J'ai essayé ces solutions: Chrome says "Resource interpreted as script but transferred with MIME type text/plain.", what gives?

Déplacement du code js/modèle dans le cadre du projet (réalisé des chemins relatifs au lieu d'absolu). Tout semblait fonctionner, mais text.js ajouterait .js à la fin de login.html, donc j'ai un 404 non trouvé. C'est en raison de l'accès inter-domaine aparentally?

différentes options config avec require.config, y compris la définition des baseURL

tonnes d'autres tweaks que j'ai malheureusement oublié. Cela a été vraiment frustrant.

Nous vous remercions de votre temps.

Edit: J'ai mis un stand-alone qui présente le même comportement que je vois sur mon drive. La structure du fichier doit être:

/ 
    index.html //This can actually be anywhere visible on the web 
    so-js/ 
     ... 
    so-templates/ 
     ... 

avis que le soi-js/et ainsi-modèles sont au Webroot, le fichier d'index peut être là où jamais.

Answer 1

Le problème est causé par cette ligne:

config: { 
    text: { 
     useXhr: function (url, protocol, hostname, port) 
     { 
     protocol = 'https'; 
     // return true; 
     } 
    } 
    } 

Il est texte primordial méthode useXhr de ', qui vise à renvoyer un booléen pour déterminer si une version Javascript du fichier texte est disponible!. Si c'est le cas, il retournera faux, sinon vrai. Parce que vous ne renvoyez rien et que undefined est falsifié, cela signifie qu'il doit le charger dans une balise <script>, ce qui explique pourquoi vous obtenez l'avertissement de type MIME et les erreurs suivantes.

Si vous supprimez l'intégralité de la propriété config, les erreurs disparaissent et loginTemplate est renseigné dans le fichier login.html.

Answer 2

vous pouvez également utiliser grunt pour générer le module à partir du modèle html

comme ceci:

templates/hello.html

<div>hello world!</div> 

à

js/templates/hello.js

define('templates/hello', '<div>hello world!</div>') 

config tâche grognement:

function converTemplate(srcDir){ 
    return function(){ 
     grunt.file.recurse(srcDir, function(abspath, rootdir, subdir, filename){ 
      if(/^.*\.html$/.test(filename)){ 
       if(subdir){ 
        subdir = subdir.replace(/\\/g, '/'); 
       } 

       var content = grunt.file.read(abspath), 
        targetPath = 'js/templates' + '/' + (subdir ? subdir + '/': '') + filename.replace('.html', '.js'), 
        moduleName = 'templates/' + (subdir ? subdir + '/': '') + filename.replace('.html', ''); 
       content = content.replace(/[ \t]*\r?\n[ \t]*/g, ''); 
       content = content.replace(/'/g, '\\\''); 
       content = "define('"+moduleName+"', [], '"+content+"');"; 
       subdir && grunt.file.mkdir('js/templates/' + (subdir ? subdir + '/': '')); 
       grunt.file.write(targetPath, content); 
      } 
     }); 
    }; 
} 

grunt.registerTask('template', 'conver template', converTemplate('templates')); 

Structure du répertoire: projet

templates/ 
    hello.html 
js/ 
    templates/ 
     hello.js