Не могу передать значение в представление

[alexandr2006]

html

<style>
fieldset {border:0; width:50%;background: grey}
</style>

<form id="todo" style="border:1px solid red; min-height:20px;"></form>
<script type="text/template" id="item-template">
<fieldset>
<input id="todo_complete" type="checkbox" <%=completed ? 'checked="checked"' : '' %>>
</fieldset>
</script>

Модель:

var Todo = Backbone.Model.extend({

defaults :{title:'old',completed: true},
docTitle : 'Todo title'

});

var myTodo = new Todo ({docTitle:'myTodo title',completed: false, title: 'new'});

Представление:

var TodoView = Backbone.View.extend({
//id:'todo',
todoTpl: _.template($('#item-template').html()),
	events: {
		'click':'click_function'
	},
	initialize: function(){
		this.render();
	},
	render: function(){
		this.$el.html ( this.todoTpl ( this.model.toJSON() ) );
		document.title = this.model.docTitle;
		
		return this;
	},
	click_function: function(e){
		console.log(e.target.tagName);
		console.log(this.$el === e.target);
	}
});


var todoTiew = new TodoView({model: myTodo, el :$("#todo")});

Запускаю, но title у страницы почему-то выводится "Todo title", а не "myTodo title" и значение title тоже не меняется. Почему?

Далее когда я щелкаю по тегу форм, console.log(this.$el === e.target); почему-то выдает false. Почему?

[armidoll]

Запускаю, но title у страницы почему-то выводится "Todo title", а не "myTodo title" и значение title тоже не меняется. Почему?

this.model.docTitle;

Это свойство объекта, которое в данном случае берется из прототипа (из конструктора) __proto__.docTitle и значение которого было задано в:

var Todo = Backbone.Model.extend({

    defaults : {title:'old', completed: true},
    docTitle : 'Todo title'

});

Оно не было изменено в дальнейшем кодом:

var myTodo = new Todo ({docTitle:'myTodo title',completed: false, title: 'new'});

который записывает значение не в __proto__.docTitle , а в attributes.docTitle

измените (как вариант):

document.title = this.model.docTitle;

на

document.title = this.model.attributes.docTitle;

или через API библиотеки Backbone:

document.title = this.model.get('docTitle');

Далее когда я щелкаю по тегу форм, console.log(this.$el === e.target); почему-то выдает false. Почему?

this.$el содержит ссылку на элемент input#todo_complete
e.target содержит ссылку на элемент form#todo

Это разные объекты, поэтому результат их сравнения через "===" false

Измените временно код на:

click_function: function(e){
        console.log(e.target.tagName);

        console.log('e.target : ');
        console.dir(e.target);

        console.log('this.$el : ');
        console.dir(this.$el);

        console.log(this.$el === e.target);
    }

и посмотрите самостоятельно, что там содержится