0
我正在爲使用Backbone和node.js express和mongodb進行自我教學構建application with the fiddle here。無法在骨幹應用程序中構建路由器
我有一個構建路由器的問題，我通過從Backbone.Router擴展來定義路由器。
在JS控制檯我有錯誤訊息：
[Error] TypeError: undefined is not a function (evaluating 'n.replace')
template (underscore-min.js, line 5)
global code (app.js, line 17)
[Error] TypeError: undefined is not a constructor (evaluating 'new appRouter()')
(anonymous function) (localhost, line 79)
j (jquery.min.js, line 2)
fireWith (jquery.min.js, line 2)
ready (jquery.min.js, line 2)
I (jquery.min.js, line 2)
[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (jquery.min.map, line 0)
[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (backbone-min.map, line 0)
[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (underscore-min.map, line 0)
正如我檢查我沒有任何語法錯誤。在使用jQuery .ready（）別名加載app.js之後，我的入門點腳本是否不能執行？
我在這裏失去的是什麼東西？
公共/ app.js
_.templateSettings = {
interpolate: /\{\{(.+?)\}\}/g
};
//Define Models, Collections, Views
var postModel = Backbone.Model.extend({
});
var postsCollection = Backbone.Collection.extend({
model: postModel,
url: "/posts"
});
var postsListView = Backbone.View.extend({
main: $('body'),
collection: postsCollection,//! May be collection must be created to use in view.
template1: _.template($('#postsListTemplate')),
template2: _.template($('#postsListItemTemplate')),
initialize: function(){
this.render();
this.collection = new postsCollection();
this.collection.fetch();
this.collection.on('add', this.renderPostsListItem, this);
},
render: function(){
this.main.html(this.template1());
return this;
},
renderPostsListItem: function(){
this.collection.forEach(function(each){
this.$el.append(this.template2(each));
});
return this;
}
});
//Define Client-Side Routes
var appRouter = Backbone.Router.extend({
routes: {
"": "viewPosts",
},
viewPosts: function(){
this.postslistview = new postsListView();
},
});
視圖/ index.ejs
<html>
<head>
<!--Templates-->
<!--Post Templates-->
<script type="text/template" id="postsListTemplate">
<h1>Blog</h1>
<h2>All Posts</h2>
<ul></ul>
</script>
<script type="text/template" id="postsListItemTemplate">
<li>{{title}}</li>
</script>
<script type="text/template" id="postTemplate">
<a href="/">All Posts</a>
<h3>{{title}}</h3>
<p>{{pubDate}}</p>
<p>{{content}}</p>
<a href="/posts/:id/comments">Comments</a>
</script>
<script type="text/template" id="postFormTemplate">
<form>
<input id="name" type="text"></input>
<input id="title" type="text"></input>
<textarea id="content"></textarea>
<button id="postpost"></button>
</form>
</script>
<!--Comment Templates-->
<script type="text/template" id="commentsListTemplate">
<a href="/">All Posts</a>
<a href"/posts/:id">Post</a>
<h1>Comments</h1>
<ul></ul>
</script>
<script type="text/template" id="commentsListItemTemplate">
<li>
<p>{{name}}</p>
<p>{{pubDate}}</p>
<p>{{content}}</p>
</li>
</script>
<script type="text/template" id="commentFormTemplate">
<form>
<input id="name" type="text"></input>
<textarea id="content"></textarea>
<button id="postcomment"></button>
</form>
</script>
<!--Linked Files: Libs & Scripts-->
<script src="jquery.min.js"></script>
<script src="underscore-min.js"></script>
<script src="backbone-min.js"></script>
<script src="app.js"></script>
</head>
<body>
<!--Entry Point Scripts-->
<!--Router can be-->
<script>
$(document).ready(function(){
var approuter = new appRouter();
Backbone.history.start({pushState: true});
});
</script>
</body>
</html>
server.js
//Require Modules
var express = require('express');
var waterline = require('waterline');
var sailsMongo = require('sails-mongo');
var path = require('path');
var serveStatic = require('serve-static');
var bodyParser = require('body-parser')
//Create Objects of Required Modules
//Probably Https server, db Conenction
var app = express();
var orm = new waterline();
//Configs, Middlewares for Created Objects of Modules.
//Dir to serve static assets; css, js, index.
//Body parser; json, urlencoded
//Config-object for Waterline.
app.use(serveStatic(path.join(__dirname, 'public')));
app.use(bodyParser.json());
var ormConfig = {
adapters: {
mongodbAdapter: sailsMongo
},
connections: {
mongodbConnection: {
adapter: 'mongodbAdapter',
host: 'localhost',
database: 'Blog',
//port:,
//user:,
//password:,
}
}
};
//Define Db Schemae, Models
//Define Models
//Load Defined Models into ORM
var postModel = waterline.Collection.extend({
identity: 'posts',
connection: 'mongodbConnection',
attributes: {
title: 'string',
author: {type: 'string', required: true},
body: 'string',
comments: [{ body: 'string', date: 'date' }],
date: { type: 'date', default: Date.now, required: true },
hidden: 'boolean',
meta: {
votes: 'integer',
favs: 'integer'
}
}
});
orm.loadCollection(postModel);
//Init Created and Configured Objects of Modules
//Init ORM. Init express server.
orm.initialize(ormConfig, function(err, models) {
if(err) throw err;
//! NOT MUST CODE. JUST TO ABBREVIATE
app.models = models.collections;
app.connections = models.connections;
});
app.listen(3333);
//Define Routes
app.get('/', function(req, res){
res.render('index.ejs');
});
我已經意識到，在我的模板屬性中，我沒有通過製作'template：_.template（$（'＃someTemplate'）。html（））'來通過jQuery選擇的對象的html。我做到了，現在我沒有前兩個錯誤。但不同的是，我知道爲什麼它是我dşd沒有定義它的sereverside路線，'/ posts'，集合在服務器上的位置。問題解決了。但仍然不明白爲什麼它會給出這樣的錯誤信息，並且不能直接引導我。 – 2014-12-07 21:46:49
看起來你沒有定義'posts'路由，所以jsut定義它並處理它。 – 2014-12-07 21:48:36
是的。正如我在評論中所說的，現在我知道了。但是爲什麼它給出了之前關於路由器的錯誤，雖然只有我缺少用於模板的.html（），儘管它給出了下劃線錯誤，但它似乎並不重要。 – 2014-12-07 21:50:07