我正在通过一个Backbone Marionette教程....一切顺利，直到我开始添加代码来实例化一个模型的集合。我使用的是Marionette 2.4.2和Backbone 1.2.1。以下是我在Chrome控制台中获得的内容：
未捕获的ReferenceError：未定义firstName VM40：6
以下是整个html，css和js代码。到目前为止，它是一个非常简单的应用程序。
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<!-- Always force latest IE rendering engine or request Chrome Frame -->
<meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'>
<!-- Use title if it's in the page YAML frontmatter -->
<title>Welcome to Tracker</title>
</meta>
<meta content='width=device-width, initial-scale=1.0' name='viewport'>
<meta content='blah content' name='description'>
<title>Landing Page – Layout Examples – Pure</title>
<link href='http://yui.yahooapis.com/pure/0.6.0/pure-min.css' rel='stylesheet'>
<link href='https://cdn.rawgit.com/konpa/devicon/89f2f44ba07ea3fff7e561c2142813b278c2d6c6/devicon.min.css' rel='stylesheet'>
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-old-ie-min.css">
<![endif]-->
<!--[if gt IE 8]> ><! <![endif]-->
<link href='http://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css' rel='stylesheet'>
<!-- <![endif] -->
<link href='http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.css' rel='stylesheet'>
<!--[if lte IE 8]>
<link rel="stylesheet" href="../stylesheets/marketing-old-ie.css">
<![endif]-->
<!--[if gt IE 8]> ><! <![endif]-->
<link href='./stylesheets/marketing.css' rel='stylesheet'>
<!-- <![endif] -->
</link>
</link>
</link>
</meta>
</head>
<body class='index'>
<div class='header'>
<div class='home-menu pure-menu pure-menu-horizontal pure-menu-fixed'>
<a class='pure-menu-heading' href='/'>Tracker Home</a>
<ul class='pure-menu-list'>
<li class='pure-menu-item pure-menu-selected'>
<a class='pure-menu-link' href='#'>Home</a>
</li>
</ul>
</div>
</div>
<div class='splash-container'>
<div class='splash'>
<h1 class='splash-head'>Tracker</h1>
<p class='splash-subhead'>
Lorem Ipsum...
</p>
<p>
<a class='pure-button pure-button-primary' href='#projects'>Start Here</a>
</p>
</div>
</div>
<div class='content-wrapper'>
<a name='projects'></a>
<div class='content'>
<h2 class='content-head is-center'>Current Candidates</h2>
<div class='pure-g'>
<div id="current-candidate-app" class='l-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-4'>
<h3 class='content-subhead'>
<i class='fa fa-book'></i>
Candidate list
</h3>
<p id="current-candidate-container">
</p>
<script type="text/template" id="current-candidate-template">
<li><%- firstName %> <%- lastName %></li>
</script>
</div>
</div>
<div class='content ribbon l-box-lrg'>
<h2 class='content-head content-head-ribbon is-center'>Finished Candidates</h2>
<div class='pure-g'>
<div class='l-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-4'>
<h3 class='content-subhead'>
<i class='fa fa-pencil-square'></i>
BWP
</h3>
<p>
Lorem Ipsum
</p>
<p>
One of my posts,
<a href='http://www.binarywebpark.com/testing-elasticsearch-in-your-rails-4-application/' target='_blank'>Testing Elasticsearch In Your Rails 4 Application</a>
was featured in
<a href='http://rubyweekly.com/issues/233' target='_blank'>Ruby Weekly #233</a>
</p>
</div>
</div>
</div>
<div class='content'>
<h2 class='content-head is-center'>Skills</h2>
<div class='pure-g'>
<div class='l-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-4'>
<h3 class='content-subhead'>
<i class='devicon-rails-plain-wordmark colored'></i>
Rails
</h3>
</div>
<div class='l-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-4'>
<h3 class='content-subhead'>
<i class='devicon-ruby-plain-wordmark colored'></i>
Ruby
</h3>
</div>
<div class='l-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-4'>
<h3 class='content-subhead'>
<i class='devicon-javascript-plain colored'></i>
JavaScript
</h3>
</div>
</div>
</div>
<div class='footer l-box is-center'>
Copyright 2015-Present by Bruce Park
<div class='pure-g'>
<div class='l-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-3'></div>
<div class='l-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-3'>
<a class='no-underline' name='contactme'></a>
<h3 class='contact-color'>
Contact Info:
<a class='no-underline' href='https://twitter.com/bpark0' target='_blank'>
<i class='fa fa-twitter'></i>
</a>
<a class='no-underline' href='https://github.com/treble37' target='_blank'>
<i class='fa fa-github'></i>
</a>
<a class='no-underline' href='http://www.binarywebpark.com/contact/' target='_blank'>
<i class='fa fa-envelope'></i>
</a>
</h3>
</div>
<div class='l-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-3'></div>
</div>
<p>
Crafted with
<a href='https://middlemanapp.com/'>Middleman</a>
</p>
</div>
</div>
<script src="./javascript/jquery.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="./javascript/json2.js"></script>
<script src="./javascript/underscore.js"></script>
<script src="./javascript/backbone.js"></script>
<script src="./javascript/backbone.localstorage.js"></script>
<script src="./javascript/backbone.marionette.js"></script>
<script type="text/javascript">
var CandidateManager = new Marionette.Application();
//models
CandidateManager.Candidate = Backbone.Model.extend({
defaults: {
firstName: "firstName-placeholder",
lastName: "lastName-placeholder",
phoneNumber: "phoneNumber-placeholder"
}
});
//collection
CandidateManager.CandidateCollection = Backbone.Collection.extend({
model: CandidateManager.Candidate
});
//views
CandidateManager.CandidateView = Marionette.ItemView.extend({
template: "#current-candidate-template",
events: {
"click p": "alertPhoneNumber"
},
alertPhoneNumber: function() {
alert(this.model.escape("firstName") + ": " + this.model.escape("phoneNumber"));
}
});
CandidateManager.CandidateCollectionView = Marionette.CollectionView.extend({
tagName: "ul",
childView: CandidateManager.CandidateView
});
CandidateManager.on("before:start", function() {
var CandidateManagerRegionContainer = Marionette.LayoutView.extend({
el: "#current-candidate-app",
regions: {
main: "#current-candidate-container"
}
});
CandidateManager.regions = new CandidateManagerRegionContainer();
});
CandidateManager.on("start", function() {
var candidates = new CandidateManager.CandidateCollection([
{
firstName: "Alice",
lastName: "Smith",
phoneNumber: "123-4568"
},
{
firstName: "Rob",
lastName: "Williams",
phoneNumber: "223-4568"
}
]);
var currentCandidateView = new CandidateManager.CandidateView({
collection: candidates
});
CandidateManager.regions.main.show(currentCandidateView);
});
CandidateManager.start();
</script>
</body>
</html>
答案 0 :(得分：0)
事实证明，这是一个愚蠢的错误：
我无意中实例化了ChildView
var currentCandidateView = new CandidateManager.CandidateView({
collection: candidates
});
当我应该实例化一个Collection视图时：
var currentCandidateView = new CandidateManager.CandidateCollectionView({
collection: candidates
});