Home/ Questions/Q 7667299
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T15:04:02+00:00

I am testing backbone.js using Backbone.js Wine Cellar Tutorial — Part 1: Getting Started

  • 0

I am testing backbone.js using Backbone.js Wine Cellar Tutorial — Part 1: Getting Started with Spring MVC 3 and JSP. Because JSP has its own <%= %> I declared the following in main.js for using Mustache style marker.

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

I changed the given HTML page accordingly to .jsp page for it to work properly. But I get the following error when I run the application.

enter image description here

Following is “index.html-changed-to-index.jsp” page.

<%@ 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>

Could someone help me understand why am I getting this error?

Thanks.

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 returned from server
enter image description here

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’m pretty sure the problem is the data your getting (try inspecting the data you are fetching before you create the model, also note the case of the fields), using the code you posted i added a couple of lines to manually create a model and add it and it seems to render fine, make sure that you have are getting a value for all of the fields defined in your template (as @ fguillen mentioned most likely your missing the id field).

    http://jsfiddle.net/khfCr/

    Edit: Sorry I couldn’t see the screen shot that you posted of the json returned, it looks correct. The problem is still probably the data being passed to the template, most likely your collection/models are not being initialized correctly.

    Edit2:
    I updated the fiddle to manually create the list instead of pulling it from the server and the example works fine, examine your collection before you render it to see if it has been created correctly)

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

    • 0