0
Я изучал backbonejs и пытался использовать вместе с моим веб-приложением Spring MVC.Backbonejs & underscroejs with Spring MVC
Приложение Spring MVC настроено идеально, и в нем нет ошибок. Но проблема, с которой я столкнулась, - это шаблон подчеркивания, который является частью моего jsp-файла.
index.jsp
<!DOCTYPE html>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
</head>
<body>
<h1>Welcome To Demo</h1>
<div id="todo">
</div>
<script type="text/template" id="item-template">
<div class="view">
<input id="todo_complete" type="checkbox" {{ completed ? 'checked="checked"' : '' }} />
<label>{{ title }}</label>
<button class="destroy"></button>
</div>
<input class="edit" value="{{ title }}">
</script>
<script type="text/javascript" src="<c:url value="/views/js/jquery-2.1.4.js"/>"></script>
<script type="text/javascript" src="<c:url value="/views/js/underscore.js"/>"></script>
<script type="text/javascript" src="<c:url value="/views/js/backbone-min.js"/>"></script>
<script type="text/javascript" src="<c:url value="/views/js/custom/demo.js"/>"></script>
</body>
</html>
Вы можете видеть, что для связывания Я использую символ
{{}}, а не <% =%>
для этого у меня есть мода маньяки моего Underscore файл: расслоение плотной
underscore.js
_.templateSettings = {
interpolate: /\{\{(.+?)\}\}/gim,
evaluate: /\{\{(.+?)\}\}/gim,
escape: /\{\{\-(.+?)\}\}/gim
};
Я могу видеть, когда я получаю index.jsp в браузере, код шаблона нерешенный:
Кодовый код, который я хранил в файле separte JS под названием
demo.js
var Todo = Backbone.Model.extend({
defaults: {
title: '',
completed: false
}
});
var myTodo = new Todo({
title: 'Check attributes property of the logged models in the console.'
});
var TodoView = Backbone.View.extend({
tagName: 'li',
todoTpl: _.template($('#item-template').html()),
events: {
'dblclick label': 'edit',
'keypress .edit': 'updateOnEnter',
'blur .edit': 'close'
},
initialize: function() {
this.$el = $('#todo');
},
render: function() {
this.$el.html(this.todoTpl(this.model.attributes));
this.input = this.$('.edit');
return this;
},
edit: function() {
},
close: function() {
},
updateOnEnter: function(e) {
}
});
var todoView = new TodoView({model: myTodo});
Так конечный результат выглядит
дайте мне знать, если вы хотите какой-либо другой информации.