【发布时间】：2014-04-19 22:20:10
【问题描述】：
我遇到了这个问题：
Uncaught TypeError: Cannot call method 'replace' of undefined underscore.js:5
j.template underscore.js:5
Backbone.View.extend.render LoginView.js:13
Backbone.Router.extend.index routes.js:24
i.extend.execute backbone.js:1
(anonymous function) backbone.js:1
(anonymous function) backbone.js:1
j.some.j.any underscore.js:5
i.extend.loadUrl backbone.js:1
i.extend.start backbone.js:1
_public.start application.js:18
(anonymous function) main.js:32
i.execCb require.js:29
$.check require.js:18
(anonymous function) require.js:23
(anonymous function) require.js:8
(anonymous function) require.js:23
v require.js:7
$.emit require.js:23
$.check require.js:19
(anonymous function) require.js:23
(anonymous function) require.js:8
(anonymous function) require.js:23
v require.js:7
$.emit require.js:23
$.check require.js:19
(anonymous function) require.js:23
(anonymous function) require.js:8
(anonymous function) require.js:23
v require.js:7
$.emit require.js:23
$.check require.js:19
(anonymous function) require.js:23
(anonymous function) require.js:8
(anonymous function) require.js:23
v require.js:7
$.emit require.js:23
$.check require.js:19
(anonymous function) require.js:23
(anonymous function) require.js:8
(anonymous function) require.js:23
v require.js:7
$.emit require.js:23
$.check require.js:19
$.enable require.js:23
$.init require.js:17
E require.js:14
i.completeLoad require.js:28
i.onScriptLoad require.js:29
当我将模板分成不同的文件时。这是我的项目结构：
`-- [ 548,855] .
|-- [ 375,907] js
| |-- [ 26,085] pages
| | `-- [ 26,085] RestaurantPage
| | |-- [ 3,595] script.js
| | |-- [ 15,816] templates
| | | |-- [ 1,009] LoginTemplate.html
| | | |-- [ 2,335] edit_order.html
| | | |-- [ 3,604] AdminTemplate.html
| | | |-- [ 2,242] WaiterTemplate.html
| | | |-- [ 2,076] orders.html
| | | |-- [ 0] README
| | | `-- [ 4,550] CookerTemplate.html
| | |-- [ 1,023] routers
| | | |-- [ 1,023] routes.js
| | | `-- [ 0] README
| | |-- [ 436] models
| | | |-- [ 0] model_orders.js
| | | |-- [ 0] model_edit_order.js
| | | |-- [ 0] README
| | | `-- [ 436] User.js
| | |-- [ 4,786] views
| | | |-- [ 1,345] orders.js
| | | |-- [ 450] WaiterView.js
| | | |-- [ 1,553] AdminView.js
| | | |-- [ 546] LoginView.js
| | | |-- [ 0] edit_order.js
| | | |-- [ 0] README
| | | `-- [ 892] CookerView.js
| | `-- [ 429] collections
| | |-- [ 103] dishescollection.js
| | |-- [ 0] collections_orders.js
| | |-- [ 0] README
| | |-- [ 111] categoriescollection.js
| | |-- [ 0] collections_edit_order.js
| | `-- [ 215] UsersCollection.js
| |-- [ 834] main.js
| |-- [ 518] application.js
| `-- [ 348,470] libs
| |-- [ 14,682] underscorejs
| | `-- [ 14,682] underscore.js
| |-- [ 282,944] jquery
| | `-- [ 282,944] jquery.js
| |-- [ 30,845] requirejs
| | |-- [ 15,234] require.js
| | `-- [ 15,611] text.js
| `-- [ 19,999] backbonejs
| `-- [ 19,999] backbone.js
`-- [ 172,948] css
|-- [ 172,806] gumby.css
`-- [ 142] style.css
这里的代码： main.js
'use strict';
require.config({
shim: {
underscore: {
exports: '_'
},
backbone: {
deps: [
'underscore',
'jquery'
],
exports: 'Backbone'
}
},
paths: {
jquery: 'libs/jquery/jquery',
backbone: 'libs/backbonejs/backbone',
underscore: 'libs/underscorejs/underscore',
text: 'libs/requirejs/text',
templates: 'pages/RestaurantPage/templates',
views: 'pages/RestaurantPage/views',
collections: 'pages/RestaurantPage/collections',
models: 'pages/RestaurantPage/models',
routers: 'pages/RestaurantPage/routers',
application: 'application'
}
});
require(["application"],
function(application) {
application.start();
}
);
应用程序.js
define([
"pages/RestaurantPage/routers/routes"
//"pages/RestaurantPage/collections/UsersCollection"
//"pages/RestaurantPage/models/User"
],
function(routes, User) {
var _public = {};
var _private = {};
_private.init = function() {
// user = new User();
router = new routes();
};
_public.start = function() {
_private.init();
Backbone.history.start();
};
return _public;
}
);
LoginView.js
define([
"underscore",
"backbone",
"jquery",
"text!pages/RestaurantPage/templates/LoginTemplate.html"
],
function(_, Backbone, $, LoginTemplate) {
return Backbone.View.extend({
//model: LoginModel,
el: '#content',
render: function() {
var that = this;
var template = _.template($('#loginpage').html());
that.$el.html(template);
//router.navigate('admin', true);
}
});
}
);
routes.js
define([
"pages/RestaurantPage/views/LoginView",
"pages/RestaurantPage/views/AdminView",
"pages/RestaurantPage/views/CookerView",
"pages/RestaurantPage/views/WaiterView"
],
function(LoginView, AdminView, CookerView, WaiterView) {
return Backbone.Router.extend({
routes: {
"": "index",
"admin": "admin",
"cooker": "cooker",
"waiter": "waiter"
},
index: function() {
loginView = new LoginView;
loginView.render();
},
admin: function() {
adminView = new AdminView;
adminView.render();
},
cooker: function() {
cookerView = new CookerView;
cookerView.render();
},
waiter: function() {
waiterView = new WaiterView;
waiterView.render();
}
});
});
所有视图都具有相同的结构...那么问题出在哪里？
更新 像这样更改代码后：
define([
"underscore",
"backbone",
"jquery",
"text!pages/RestaurantPage/templates/LoginTemplate.html"
],
function(_, Backbone, $, Template) {
return Backbone.View.extend({
template: _.template(Template),
el: '#content',
render: function() {
this.$el.html(this.template());
return this;
//router.navigate('admin', true);
}
});
}
);
错误消失了...但是没有渲染！ 这让我很生气:)
【问题讨论】：
标签： javascript backbone.js requirejs