JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<h1>Backbone project</h1>
<div id="todo"></div>
<script type="text/template" id="item-template">
<div>
<input id="todo_complete" type="checkbox" <%= completed ? 'checked="checked"' : '' %> >
<%- title %>
</div>
</script>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/underscore/underscore-min.js"></script>
<script src="bower_components/backbone/backbone-min.js"></script>
<script src="js/demo.js"></script>
</body>
JavaScript
(function() {
// определение модели Todo
var Todo = Backbone.Model.extend({
// значения атрибутов todo по умолчанию
defaults: {
title: '',
completed: false
}
});
// Создание экземпляра модели задачи с помощью ее названия,
// атрибут 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');
// Позже мы рассмотрим вызов
// this.listenTo(someCollection, 'all', this.render);
// но вы можете запустить этот пример прямо сейчас,
// вызвав метод TodoView.render();
},
// Повторное отображение заголовков задач.
render: function () {
this.$el.html(this.todoTpl(this.model.toJSON()));
// Здесь $el - это ссылка на элемент jQuery,
// связанный с представлением, todoTpl - ссылка
// на Underscore-шаблон,а toJSON() возвращает объект,
// содержащий атрибуты модели.
// В совокупности этот оператор заменяет HTML-код
// DOM-элемента на результат создания
// экземпляра шаблона с атрибутами модели.
this.input = this.$('.edit');
return this;
},
edit: function () {
// выполняется при двойном щелчке по ярлыку задачи
},
close: function () {
// выполняется, когда задача теряет фокус
},
updateOnEnter: function (e) {
//...