javascript Requirejs + Backbone Uncaught TypeError：无法读取未定义的属性“模型”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14617523/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Requirejs + Backbone Uncaught TypeError: Cannot read property 'Model' of undefined
提问by PhuongTT
I have been starting with Backbone. I used Require to load modul and got this error. Can anyone explain this? In file user.js i have this bug when I try to create Backbone.Model.extend. I used Backbone.js 0.9.10, jQuery v1.9.0, RequireJS 2.1.4, Underscore 1.4.4. Thank you.
我从 Backbone 开始。我使用 Require 加载模块并收到此错误。谁能解释一下？在文件 user.js 中，当我尝试创建 Backbone.Model.extend 时出现此错误。我使用了 Backbone.js 0.9.10、jQuery v1.9.0、RequireJS 2.1.4、Underscore 1.4.4。谢谢你。
index.html
索引.html
<!doctype html>
<html lang="en">
<head>
<title></title>
<!-- Load the script "js/main.js" as our entry point -->
<script data-main="js/main.js" src="js/libs/require/require.js"></script>
<link rel="stylesheet" type="text/css" href="stylesheets/style.css">
</head>
<body>
<div id="container">
<div id="menu"></div>
<div id="content"></div>
</div>
</body>
</html>
main.js
主文件
require.config({
paths:{
jquery:'libs/jquery/jquery-min',
underscore:'libs/underscore/underscore-min',
backbone:'libs/backbone/backbone-min',
templates:'../templates'
}
});
require(['app'], function (App) {
console.log('____main.js')
App.initialize();
console.log('main.js')
});
app.js
应用程序.js
define(['jquery', 'underscore', 'backbone', 'router'], function($, _, Backbone, Router) {
var initialize = function(){
Router.initialize();
console.log('app.js');
};
return {
initialize: initialize
};
});
router.js
路由器.js
define([
'jquery',
'underscore',
'backbone',
'views/home/login'
//'views/room',
// 'views/friend',
// 'views/play',
// 'views/money'
], function ($, _, Backbone, loginView) {
console.log('router.js');
var AppRouter = Backbone.Router.extend({
routes:{
'/home':'showHome',
'*actions':'defaultAction'
},
showHome:function () {
loginView.render();
},
defaultAction:function (actions) {
console.log('No route:', actions);
}
});
var initialize = function(){
var app_router = new AppRouter;
Backbone.history.start();
};
return {
initialize: initialize
};
});
login.js(Backbone View)
login.js（主干视图）
define([
'jquery',
'underscore',
'backbone',
'collections/home/users',
'text!templates/home/login.html'
], function($, _, Backbone, usersCollections, homeLoginTemplate){
var loginView = Backbone.View.extend({
el: $('container'),
render: function(){
var data = {};
var compiledTemplate = _.template(homeLoginTemplate);
this.el.append(compiledTemplate);
}
});
console.log('login.js');
return new loginView;
});
user.js (Backbone Model)
user.js（主干模型）
define([
'underscore',
'backbone'
], function (_, Backbone) {
console.log('user model');
var userModel = Backbone.Model.extend({
default:{
username:"",
password:""
}
});
return userModel;
});
users.js (Backbone Collection)
users.js（主干集合）
define(['underscore', 'backbone', 'models/user'], function (_, Backbone, userModel) {
console.log('user collection');
var usersCollection = Backbone.Collection.extend({
model:userModel
});
return new usersCollection;
});
I can't post my picture. But you can see in this link http://imageshack.us/photo/my-images/809/devi.jpg/.
我的照片发不上来 但是您可以在此链接中看到http://imageshack.us/photo/my-images/809/devi.jpg/。
采纳答案by Carlos Azaustre
Use that @Ingro said and try to use the default underscore marker when you call to render templates.
使用@Ingro 所说的，并在调用渲染模板时尝试使用默认的下划线标记。
for example:
例如：
main.js
主文件
require.config({
paths:{
jquery:'libs/jquery/jquery-min',
underscore:'libs/underscore/underscore-min',
backbone:'libs/backbone/backbone-min',
templates:'../templates'
},
shim: {
backbone: {
deps: ['jquery','underscore'],
exports: 'Backbone'
}
}
});
require(['app'], function (App) {
console.log('____main.js')
App.initialize();
console.log('main.js')
});
and in anyone file that you use Underscore templates, for example your "login.js" use this:
并在您使用 Underscore 模板的任何文件中，例如您的“login.js”使用这个：
define([
'backbone',
'collections/home/users',
'text!templates/home/login.html'
], function(Backbone, usersCollections, homeLoginTemplate){
var loginView = Backbone.View.extend({
el: $('container'),
render: function(){
var data = {};
var compiledTemplate = _.template(homeLoginTemplate);
this.el.append(compiledTemplate);
}
});
console.log('login.js');
return new loginView;
});
jquery and underscore both are used by default in backbone require call. I hope these help you.
jquery 和下划线在主干需要调用中默认使用。我希望这些对你有帮助。
回答by Ingro
Maybe you're missing some shim config in your main.js file, read here: http://requirejs.org/docs/api.html#config-shim
也许您的 main.js 文件中缺少一些垫片配置，请在此处阅读：http://requirejs.org/docs/api.html#config-shim
You could try to add:
您可以尝试添加：
shim: {
'backbone': {
deps: ['jquery','underscore'],
exports: 'Backbone'
}
}
