"id не определен" в underscore.js - PullRequest
Новая
       35

"id не определен" в underscore.js

1 голос
/ 20 марта 2012

Я тестирую backbone.js с использованием Backbone.js Учебное пособие по винному погребу - Часть 1. Начало работы с Spring MVC 3 и JSP . Поскольку JSP имеет свой собственный <%= %>, я объявил следующее в main.js для использования маркера стиля Усы . 

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

Я изменил данную HTML-страницу соответственно на .jsp страницу, чтобы она работала правильно. Но я получаю следующую ошибку при запуске приложения.

enter image description here

Ниже приведена страница «index.html-change-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>

Может ли кто-нибудь помочь мне понять, почему я получаю эту ошибку?

Спасибо.

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 вернулся с сервера enter image description here

Ответы [ 3 ]

1 голос
/ 21 марта 2012

Я почти уверен, что проблема заключается в данных, которые вы получаете (попробуйте проверить данные, которые вы выбираете, прежде чем создавать модель, также обратите внимание на случай полей), используя код, который вы разместили, я добавил пару строк в вручную создайте модель и добавьте ее, и она выглядит нормально, убедитесь, что у вас есть значение для всех полей, определенных в вашем шаблоне (как @ fguillen упомянул, скорее всего, вы пропустили поле id).

http://jsfiddle.net/khfCr/

Редактировать: Извините, я не смог увидеть снимок экрана, который вы опубликовали с возвращенным json, он выглядит правильно. Проблема по-прежнему, вероятно, заключается в том, что данные передаются в шаблон, скорее всего, ваша коллекция / модели инициализируются неправильно.

Edit2: Я обновил скрипку, чтобы вручную создать список вместо того, чтобы извлекать его с сервера, и пример работает нормально, проверьте свою коллекцию перед ее рендерингом, чтобы убедиться, что она была создана правильно)

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

1 голос
/ 23 марта 2012

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();
})();

Returns

enter image description here

0 голосов
/ 21 марта 2012

Похоже, вы не передали объект со свойством id в вызов шаблона () следующим образом: 

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