Я хотел бы включить с Backbone.js + Require.js. Я могу загружать модули просто отлично. Но когда я пытаюсь загрузить мои .html-файлы, используя текст! плагин (text.js), я получаю эти ошибки:
Ресурс интерпретируется как скрипт, но передается с текстом типа MIME / html: « https://host.net/templates/login.html ». require.js: 1843
Uncaught SyntaxError: Неожиданный токен <login.html: 1
Uncaught TypeError: невозможно вызвать метод «replace» для undefined underscore.js: 1130
Вот спецификации того, с чем я работаю:
Браузер : Chrome
Серверная сторона : PHP w / Slim
Машины : микро-экземпляр AWS с bitnami AMI // Эти вещи поставляются с установленными заводскими настройками, поэтому возможно, что конфигурация Apache неверна или неверный php.ini. Я просто не знаю, что.
Структура каталога:
/ 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 Вот какой код я считаю релевантным:
/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>`
Работа по поиску решения. Когда я смотрю на отладчик Chrome, на вкладке «сеть» я вижу, что действительно был восстановлен файл login.html, но хром считает его JS-файлом.
Я прошел через код с помощью точки останова и обнаружил, что в Require.js 1843 объект узла в этой строке имеет атрибут, называемый «внешнийHtml», равный тегу '' с множеством атрибутов. Так что, возможно, это упаковка моего html в теге? Когда я просматриваю вкладку предварительного просмотра на вкладке сети отладчика, я действительно вижу разметку. Если login.html имеет действительный код js, тогда я не получаю синтаксическую ошибку. Я все еще получаю ошибку underscore.js, потому что это неверный html.
Я пробовал эти решения: Chrome говорит: «Ресурс интерпретируется как скрипт, но передается с типом текста MIME / plain». Что дает?
Перемещение кода js / template в проекте (создаются пути относительные, а не абсолютные). Все, казалось, сработало, но text.js добавит .js к концу login.html, так что я получил 404 не найден. Это из-за междоменного доступа aparentally?
различные параметры конфигурации с require.config, включая настройку baseURL
тонны других настроек, которые я, к сожалению, забыл. Это было очень неприятно.
Спасибо за ваше время.
Редактирование: я поставил автономный режим, демонстрирующий то же поведение, что и на моем диске . Структура файла должна быть:
/ index.html //This can actually be anywhere visible on the web so-js/ ... so-templates/ ...
обратите внимание, что so-js / и so-templates находятся в webroot, индексный файл может быть где угодно.