1
に "IDが定義されていない" 私はSpring MVCの3とJSPでBackbone.js Wine Cellar Tutorial — Part 1: Getting Startedを使用してBACKBONE.JSをテストしています。 JSPには独自の<%= %>があるので、私はmain.jsにの口ひげスタイルマーカを次のように宣言しました。underscore.js
_.templateSettings = {
interpolate : /\{\{(.+?)\}\}/g
};
それに応じて、指定されたHTMLページを.jspページに変更して正しく動作させました。しかし、私はアプリケーションを実行すると、次のエラーが発生します。
続いて "index.htmlを-変更-に-のindex.jsp" ページです。
<%@ include file="/WEB-INF/views/include.jspf" %>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Cellar</title>
<%--Stylesheets --%>
<link href="<c:url value="/resources/css/styles.css" />" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header"><span class="title">Backbone Cellar</span></div>
<div id="sidebar"></div>
<div id="content">
<h2>Welcome to Backbone Cellar</h2>
<p>
This is a sample application part of of three-part tutorial showing how to build a CRUD application with Backbone.js.
</p>
</div>
<!-- Templates -->
<script type="text/template" id="tpl-wine-list-item">
<a href='#wines/{{ id }}'>{{ name }}</a>
</script>
<script type="text/template" id="tpl-wine-details">
<div class="form-left-col">
<label>Id:</label>
<input type="text" id="wineId" name="id" value="{{ id }}" disabled />
<label>Name:</label>
<input type="text" id="name" name="name" value="{{ name }}" required/>
<label>Grapes:</label>
<input type="text" id="grapes" name="grapes" value="{{ grapes }}"/>
<label>Country:</label>
<input type="text" id="country" name="country" value="{{ country }}"/>
<label>Region:</label>
<input type="text" id="region" name="region" value="{{ region }}"/>
<label>Year:</label>
<input type="text" id="year" name="year" value="{{ year }}"/>
</div>
<div class="form-right-col">
<img height="300" src="<c:url value='/resources/images/{{ picture }}' />" />
<label>Notes:</label>
<textarea id="description" name="description">{{ description }}</textarea>
</div>
</script>
<%--JavaScripts --%>
<script type="text/javascript" src="<c:url value="/resources/js/jquery-1.7.1.js" />"></script>
<script type="text/javascript" src="<c:url value="/resources/js/underscore.js" />"></script>
<script type="text/javascript" src="<c:url value="/resources/js/backbone.js" />"></script>
<script type="text/javascript" src="<c:url value="/resources/js/main.js" />"></script>
</body>
</html>
なぜこのエラーが発生するのか理解しやすくなりますか？
ありがとうございました。
EDIT：
main.js
// Using Mustache style markers
_.templateSettings = {
interpolate : /\{\{(.+?)\}\}/g
};
// Models
window.Wine = Backbone.Model.extend();
window.WineCollection = Backbone.Collection.extend({
model:Wine,
url:"/mavenedge/wines"
});
//Views
window.WineListView = Backbone.View.extend({
tagName:'ul',
initialize:function() {
this.model.bind("reset", this.render, this);
},
render:function (eventName) {
_.each(this.model.models, function (wine) {
$(this.el).append(new WineListItemView({model:wine}).render().el);
}, this);
return this;
}
});
window.WineListItemView = Backbone.View.extend({
tagName:"li",
template:_.template($('#tpl-wine-list-item').html()),
render:function (eventName) {
$(this.el).html(this.template(this.model.toJSON()));
return this;
}
});
window.WineView = Backbone.View.extend({
template:_.template($('#tpl-wine-details').html()),
render:function (eventName) {
$(this.el).html(this.template(this.model.toJSON()));
return this;
}
});
// Router
var AppRouter = Backbone.Router.extend({
routes:{
"":"list",
"wines/:id":"wineDetails"
},
list:function() {
this.wineList = new WineCollection();
this.wineListView = new WineListView({model:this.wineList});
this.wineList.fetch();
$('#sidebar').html(this.wineListView.render().el);
},
wineDetails:function (id) {
this.wine = this.wineList.get(id);
this.wineView = new WineView({model:this.wine});
$('#content').html(this.wineView.render().el);
}
});
var app = new AppRouter();
Backbone.history.start();
JSONは多分あなたはidを持つオブジェクトが渡されていないように見えますサーバー 
：画像が変更されました。 – skip
この質問には多すぎるノイズがあるので、エラーを再現する簡単なコード例を作成することができます。どのようにエラーが発生したのかは、あなたが_id_属性**を持っていない_hash_でテンプレートを_feeding_していることです。 – fguillen
あなたはあなたの摂食のデータを表示できますか？手動でモデルを追加してみてください（サーバーから引き出したり、ルートを使用しないでください）。 – Jack