Question

我正在使用{{3>} Spring MVC 3 和 JSP 测试 backbone.js 。因为JSP有自己的<%= %>我在 main.js 中声明了以下内容，因为它使用 Mustache 样式标记。

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

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

enter image description here

以下是“index.html-changed-to-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

Answer 1

我很确定问题是你得到的数据（尝试检查你在创建模型之前获取的数据，还要注意字段的情况），使用你发布的代码我添加了几行手动创建一个模型并添加它，它似乎渲染得很好，确保你已经获得了模板中定义的所有字段的值（正如@ fguillen提到的那样，你很可能错过了id字段）。

http://jsfiddle.net/khfCr/

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

EDIT2：我更新了小提琴手动创建列表，而不是从服务器中拉出它，示例工作正常，检查您的集合，然后再渲染它以查看它是否已正确创建）

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

Answer 2

<强> 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>

<强> celler.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

Answer 3

看起来好像你没有将带有id属性的对象传递给你的template（）调用：

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

underscore.js中的“id未定义”

3 个答案: