私はこのチュートリアルに従っています - https://www.youtube.com/watch?v=FZSjvWtUxYk
そして、私はこの部分で立ち往生しました(エラーが発生し始めた部分の後にビデオが始まります): https://www.youtube.com/watch?feature=player_detailpage&v=FZSjvWtUxYk#t=1678
エラーでわかるように、underscore.js テンプレートと関係があります。
Uncaught exception: SyntaxError: Function constructor: failed to compile function
Error thrown at line 637, column 3 in <anonymous function: T.template>(e, t, n) in http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.2/underscore-min.js:
throw u.source = s, u
called from line 57, column 12 in <anonymous function: success>() in file://localhost/home/andrius/dev/backbone/beginner/index.html:
var template = _.template($('#user-list-template').html(), {users: users.models}) ;
called from line 442, column 4 in <anonymous function: a.success>(d, e, f) in http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js:
c && c(b, d)
called via Function.prototype.apply() from line 870, column 5 in <anonymous function: p.Callbacks>(b) in http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js:
if (i[h].apply(b[0], b[1]) === !1 && a.stopOnFalse)
called from line 915, column 5 in <anonymous function: fireWith>(a, b) in http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js:
return b = b || [], b = [a, b.slice ? b.slice() : b], i && (!d || j) && (e ? j.push(b) : k(b)), this
called from line 3650, column 4 in y(a, c, f, i) in http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js:
x.status = a, x.statusText = (c || y) + "", k ? o.resolveWith(m, [s, y, x]) : o.rejectWith(m, [x, y, t]), x.statusCode(r), r = b, j && n.trigger("ajax" + (k ? "Success" : "Error"), [x, l, k ? s : t]), q.fireWith(m, [x, y]), j && (n.trigger("ajaxComplete", [x, l]), --p.active || p.event.trigger("ajaxStop"))
called from line 3879, column 6 in <anonymous function: d>(a, e) in http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js:
l && f(h, j, l, k)
Error initially occurred at line 634, column 3 in <anonymous function: T.template>(e, t, n) in http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.2/underscore-min.js:
var o = new Function(n.variable || "obj", "_", s)
called from line 57, column 12 in <anonymous function: success>() in file://localhost/home/andrius/dev/backbone/beginner/index.html:
var template = _.template($('#user-list-template').html(), {users: users.models}) ;
called from line 442, column 4 in <anonymous function: a.success>(d, e, f) in http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js:
c && c(b, d)
called via Function.prototype.apply() from line 870, column 5 in <anonymous function: p.Callbacks>(b) in http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js:
if (i[h].apply(b[0], b[1]) === !1 && a.stopOnFalse)
called from line 915, column 5 in <anonymous function: fireWith>(a, b) in http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js:
return b = b || [], b = [a, b.slice ? b.slice() : b], i && (!d || j) && (e ? j.push(b) : k(b)), this
called from line 3650, column 4 in y(a, c, f, i) in http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js:
x.status = a, x.statusText = (c || y) + "", k ? o.resolveWith(m, [s, y, x]) : o.rejectWith(m, [x, y, t]), x.statusCode(r), r = b, j && n.trigger("ajax" + (k ? "Success" : "Error"), [x, l, k ? s : t]), q.fireWith(m, [x, y]), j && (n.trigger("ajaxComplete", [x, l]), --p.active || p.event.trigger("ajaxStop"))
called from line 3879, column 6 in <anonymous function: d>(a, e) in http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js:
l && f(h, j, l, k)
私のコード(私のコードとビデオに違いはありません..)
<html lang="en">
<head>
<meta charset="utf-8">
<title>BackboneTutorials.com Beginner Video</title>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1>User Manager</h1>
<hr />
<div class="page"></div>
</div>
<script type="text/template" id="user-list-template">
<table class="table striped">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th></th>
</tr>
</thead>
<tbody>
<% _.each(users, function(user) { %>
<tr>
<td><%= user.get('firstname') %></td>
<td><%= user.get('lastname') %></td>
<td><%= user.get('age') %></td>
<td></td>
</tr>
<% )}; %>
</tbody>
</table>
</script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.2/underscore-min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>
<script>
$.ajaxPrefilter( function( options, originalOptions, jqXHR ) {
options.url = 'http://backbonejs-beginner.herokuapp.com' + options.url;
});
var Users = Backbone.Collection.extend({
url: '/users'
});
var UserList = Backbone.View.extend({
el: '.page',
render: function () {
var that = this;
var users = new Users();
users.fetch({
success: function () {
var template = _.template($('#user-list-template').html(), {users: users.models}) ;
that.$el.html(template);
}
})
}
});
var Router = Backbone.Router.extend({
routes: {
'': 'home'
}
});
var userList = new UserList();
var router = new Router();
router.on('route:home', function () {
userList.render()
});
Backbone.history.start();
</script>
</body>