我正在尝试制作一个简单的 Backbone Web 应用程序。我正在使用 require 来管理我的所有依赖项。我的html很简单:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="./css/todos.css">
<title>Clinical Auth</title>
<script type="text/javascript" src="js/lib/require-2.1.1.js" data-main="js/app"></script>
</head>
<body>
<div id="container"></div>
</body>
</html>
我的 app.js 只是一个调用我的 application.view.js 的路由器:
require([
'backbone',
'views/application.view'
], function(Backbone, app) {
var Router = Backbone.Router.extend({
routes: {
"": "main"
},
main: function(){
var appView = new app();
appView.render();
}
});
var router = new Router();
Backbone.history.start();
});
如您所见,我在路线标题中启动我的应用程序main
。我的 application.view.js 也很简单。
define(function(require) {
"use strict";
var Backbone = require('backbone');
var $ = require('jquery');
var AppView = Backbone.View.extend({
el: $('#container'),
render: function() {
$(this.el).append("<div>hello world</div>");
return this;
}
});
return AppView;
});
另外,这是我的 require.config 文件:
require.config({
baseUrl: "./js/",
paths: {
jquery: 'lib/jquery-1.8.2',
underscore: 'lib/underscore-1.4.2',
backbone: 'lib/backbone-0.9.2',
'backbone.localStorage': 'lib/backbone.localStorage'
},
shim: {
underscore: {
exports: "_"
},
backbone: {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
},
'backbone.localStorage': {
deps: ['backbone'],
exports: 'Backbone'
}
}
});
当我在主路由中设置断点时,我可以看到container
正在被操纵,但它永远不会出现在我的屏幕上。我究竟做错了什么?我知道这将是一件简单的事情,但我正在拔头发。