2012-03-20 55 views
1

“的id没有被定义为” 我使用Backbone.js Wine Cellar Tutorial — Part 1: Getting StartedSpring MVC的3JSP测试Backbone.js的。由于JSP有自己的<%= %>我在main.js中声明以下内容,使用胡子样式标记。在underscore.js

_.templateSettings = { 
     interpolate : /\{\{(.+?)\}\}/g 
}; 

我将给定的HTML页面相应地更改为.jsp页面以使其正常工作。但是当我运行该应用程序时,出现以下错误。

enter image description here

以下是 “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> 

有人可以帮我理解为什么我得到这个错误?

谢谢。

编辑:

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从服务器返回 enter image description here

+1

@MДΓΓБДLL&BalusC:图片已被更改。 – skip 2012-03-20 19:13:45

+2

在这个问题中有太多的噪音,我相信你可以创建一个更简单的代码示例,它仍然会重现错误。任何我认为错误的是,你正在用_hash_这个**没有_id_属性**的模板。 – fguillen 2012-03-20 19:23:41

+0

你可以显示你喂食的数据吗?尝试手动添加模型(而不是从服务器拉出或使用路径)。 – Jack 2012-03-20 20:34:58

回答

1

我敢肯定,问题是你得到的数据(尝试检查你创建模型之前提取的数据,还要注意字段的情况),使用你发布的代码我添加了一对要手动创建一个模型并添加它,它似乎渲染得很好,请确保您已获得模板中定义的所有字段的值(正如@ fguillen提到最有可能缺少id字段)。

http://jsfiddle.net/khfCr/

编辑:抱歉,我不能看到你发布的JSON返回的屏幕截图,它看起来是正确的。问题仍然可能是传递给模板的数据,很可能您的集合/模型未被正确初始化。

EDIT2: 我更新了小提琴手动创建列表,而不是从服务器上拉的和示例工作正常,检查你收集你渲染它,看看是否已正确创建它)

http://jsfiddle.net/khfCr/1/

+0

我想知道'id'属性是否可以在'.jsp'页面上使用'

0

看起来也许你没有传递的对象有一个id财产到你的模板()如下所示:

this.template({id:100, name:"Gareth"}); 
+0

我已经对显示我正在传递的问题进行了编辑。 – skip 2012-03-20 21:20:06

+1

在运行模板时调试它,以确定model.toJSON()是否为wine对象,这将排除您发布的其他代码(或将其聚焦)。此外,我会通过一个集合到你的酒单视图,例如; this.wineListView = new WineListView({collection:this.wineList});. _.each()可能不起作用 – 2012-03-20 22:59:06

1

cellar.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>Welcome to Backbone Wine Cellar</title> 

    <%--Templates --%> 
    <script type="text/template" id="tpl-wine-list-item"> 
     <a href="#">{{ name }}</a> 
    </script> 
</head> 
<body> 

    <%-- Javascript --%> 
    <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/cellar.js" />"></script> 
</body> 
</html> 

塞勒。JS

//for using 'Mustache.js' style templating 
_.templateSettings = { 
    interpolate : /\{\{(.+?)\}\}/g 
}; 

(function(){ 
    var Wine = Backbone.Model.extend(); 

    var WineList = Backbone.Collection.extend({ 
     model: Wine, 
     url: "/mavenedge/wines", 
     parse: function(data) { 
      return data.wines; 
     } 
    }); 

    var WineListView = Backbone.View.extend({ 
     el: $("body"), 
     template: _.template($("#tpl-wine-list-item").html()), 
     initialize: function() { 
      _.bindAll(this, "render"); 
      this.collection = new WineList(); 
      this.collection.fetch(); 
      this.collection.bind("reset", this.render); //'reset' event fires when the collection has finished receiving data from the server 
     }, 
     render: function() {  
      _.each(
         this.collection.models, 
         function(wine) { 
          $(this.el).append(this.template({name: wine.get("name")})); 
         }, 
         this 
        ); 
     } 
    }); 

    var wineListView = new WineListView(); 
})(); 

返回

enter image description here