Javascript-форум (https://javascript.ru/forum/)
-   Backbone.js (https://javascript.ru/forum/backbone/)
-   -   Не могу передать значение в представление (https://javascript.ru/forum/backbone/61193-ne-mogu-peredat-znachenie-v-predstavlenie.html)

alexandr2006 08.02.2016 10:30

Не могу передать значение в представление
 
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 12.02.2016 10:09

Цитата:

Сообщение от alexandr2006 (Сообщение 406795)
Запускаю, но 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');


Цитата:

Сообщение от alexandr2006 (Сообщение 406795)
Далее когда я щелкаю по тегу форм, 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);
    }


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


Часовой пояс GMT +3, время: 13:27.