I was trying the backbone.js examples given here and then tried writing some code on my own.
For some reason the event handler I have attached to event 'click p' is not working. Why is the 'highlight' function not executing when a paragraph tag is clicked?
var ItemView = Backbone.View.extend({
tagName : 'p',
events: {
'click p': 'highlight'
},
initialize: function(){
console.log("An object of ItemView was created");
_.bindAll(this, 'render', 'highlight');
this.render();
},
render: function(){
this.$el.text(this.model.get('content'));
$('body').append(this.$el);
return this;
},
highlight: function(){
console.log('clicked');
}
});
This event it targeting any <p> element inside your root element. It is not targeting your root element, even if your root element is a <p> element.
Try:
events: {
'click': 'highlight'
}
To target the root element.
Hmmm... in your render, you replace all the body content with this.$el. I'm thinking you've effectively "unhooked" the events hash when you replace all the content. So after you do the append, call this.delegateEvents() like so:
render: function(){
this.$el.text(this.model.get('content'));
$('body').append(this.$el);
this.delegateEvents();
return this;
}
This should allow you to click on your paragraph tags.
Related
I have the following structure:
var PopupView = Backbone.View.extend({
el:'#shade',
events:{
'click .popup-cancel': 'hide',
'click .popup-commit': 'commit',
},
show: function(){
...
},
hide: function(){
...
},
initialize: function(){
_.bindAll(this, 'show','hide','commit');
}
});
var Popup1 = PopupView.extend({
render: function(){
...
},
commit: function(){
console.log('1');
...
},
});
var Popup2 = PopupView.extend({
render: function(){
...
},
commit: function(){
console.log('2');
...
},
});
The problem is that when I click .popup-commit from one of the popups, it actually triggers the methods of both of them. I've tried moving the declaration of events and initialize() up into the child classes, but that doesn't work.
What's going on, and how can I fix it (so that the commit method of only the view I'm triggering it on gets fired)?
Your problem is right here:
el:'#shade'
in your PopupView definition. That means that every single instance of PopupView or its subclasses (except of course those that provide their own el) will be bound to the same DOM node and they will all be listening to events on on id="shade" element.
You need to give each view its own el. I'd recommend against ever setting el in a view definition like that. I think you'll have a better time if you let each view create (and destroy) its own el. If you do something like:
var PopupView = Backbone.View.extend({
className: 'whatever-css-class-you-need',
tagName: 'div', // or whatever you're using to hold your popups.
attributes: { /* whatever extra attributes you need on your el */ },
//...
});
then your views will each get their own el. See the Backbone.View documentation for more information on these properties.
In this code sample, a Backbone view is bound to a pre-existing DOM element. The scroll event triggers as expected.
In this alternate sample, the Backbone view renders the HTML instead of using a pre-existing DOM element. The scroll event doesn't fire.
Why?
The primary difference is the second sample does this:
this.$el.html(template);
This works:
http://jsfiddle.net/hKWR9/1/
$(function(){
var MyView = Backbone.View.extend({
className: 'scrollbox',
events: {
'click': 'onClick',
'scroll': 'onScroll'
},
initialize: function() {
this.render();
},
render: function() {
var template = '<div class="filler"></div>';
$('body').append(this.$el);
this.$el.html(template);
},
onClick: function() {
console.log('click');
},
onScroll: function() {
console.log("scroll");
}
});
var App = new MyView();
}());
Your fiddle doesn't work, because you defined your el with classname .scrollbox, while it should have been scrollbox. There doesnt seem to be a benefit in creating another 'scrollbox' within this '.scrollbox'.
View:
Member.Views.Popover = Backbone.View.extend({
template: "member/default",
tagName: 'a',
className: 'header-auth member',
events: {
'click a.member': 'toggle'
},
initialize: function() {
//todo
},
toggle: function(){
console.log("toggle");
}
});
Output:
<a class="header-auth member">
//content from template
</a>
First problem: first I defined just a template without tagName and className because this data was already set in the template. But this wrapped the template with a div. To avoid that I set tagName and className and removed this data from template because now it is set by backbone.
Second problem: now that I use tagName the click event does not work anymore.
Any ideas how to fix this?
You can should change click a.member to merely click, since the element is your view.
Trying to create a todo example app to mess around with backbone. I cannot figure out why the click event for the checkbox of a task is not firing. Here is my code for the TaskCollection, TaskView, and TaskListView:
$(document).ready(function() {
Task = Backbone.Model.extend({});
TaskCollection = Backbone.Collection.extend({
model: 'Task'
});
TaskView = Backbone.View.extend({
tagName: "li",
className: "task",
template: $("#task-template").html(),
initialize: function(options) {
if(options.model) {
this.model = options.model
}
this.model.bind('change',this.render,this);
this.render();
},
events: {
"click .task-complete" : "toggleComplete"
},
render: function(){
model_data = this.model.toJSON();
return $(_.template(this.template, model_data));
},
toggleComplete: function() {
//not calling this function
console.log("toggling task completeness");
}
});
TaskListView = Backbone.View.extend({
el: $("#task-list"),
task_views: [],
initialize: function(options) {
task_collection.bind('add',this.addTask,this);
},
addTask: function(task){
task_li = new TaskView({'model' : task});
this.el.append(task_li.render());
this.task_views.push(task_li);
},
});
});
Template for the task:
<script type='text/template' id='task-template'>
<li class="task">
<input type='checkbox' title='mark complete' class='task-check' />
<span class='task-name'><%= name %></span>
</li>
</script>
I can't seem to figure out why the toggleComplete event will not fire for the tasks. how can I fix this?
The problem here is that the backbone events only set to the element of the view (this.el) when you create a new view. But in your case the element isn't used. So you have the tagName:li attribute in your view, which let backbone create a new li element, but you doesn't use it. All you return is a new list element created from your template but not the element backbone is creating, which you can access by this.el
So you have to add your events manually to your element created by your template using jQuery or add your template as innerHtml to your element:
(this.el.html($(_.template(this.template, model_data)))
Try changing the lines where you set your listeners using .bind() to use .live(). The important difference is .live() should be used when you want to bind listeners to elements that will be created after page load.
The newest version of jQuery does away with this bit of ugliness and simplifies the methods used to set event listeners.
Your event is binding to a class of .task-complete but the class on your checkbox is .task-check
Try modifying your render function to call delegateEvents() like so:
render: function(){
model_data = this.model.toJSON();
this.el = $(_.template(this.template, model_data));
this.delegateEvents();
return this.el;
},
You'd really be better off changing your template to not include the li and then return this.el instead of replacing it, but if you want the events to work you need to have this.el be the root element one way or another; delegateEvents() re-attaches the event stuff, so when you change this.el that should fix the issue.
#Andreas Köberle answers it correctly. You need to assign something to this.elto make events work.
I changed your template and your TaskView#render() function.
This JSFiddle has the changes applied.
New render function:
render: function(){
var model_data = this.model.toJSON();
var rendered_data = _.template(this.template, model_data);
$(this.el).html(rendered_data);
return this;
}
It is recommended that the render() returns this.
One line in your TaskListView#addTask function changes from this.el.append(task_li.render()); to this.el.append(task_li.render().el);.
Template change
Since we are using this.el in the render() function, we have to remove the <li> tag from the template.
<script type='text/template' id='task-template'>
<input type='checkbox' title='mark complete' class='task-complete' />
<span class='task-name'><%= name %></span>
</script>
It appears as though the following code is getting inside initialize but my event doesn't appear to be firing.
What am I missing here?
var index = (function ($, window, document) {
var methods = {};
methods = {
init: function () {
},
getView: Backbone.View.extend({
el: $('.settings'),
events: {
'click .settings': 'addUl'
},
initialize: function () {
console.log('init');
},
render: function () {
},
addUl: function () {
console.log('addUI');
this.el.append("<ul> <li>hello world </li> </ul>");
}
})
};
return methods; } (jQuery, window, document));
var stuff = new index.getView();
Link to the jsbin
Remove the space in 'click .settings'
Actually remove .settings entirely.
'click .settings' is registering a click handler for a descendant of this.el that matches '.settings'.
In your example you want to register an event on this.el directly so you don't need the descendant selector.
The problem is that it is your view element ($el) that has the settings class and not a child.
click .settings tells backbone to bind a "click" event on the $el for any children that have .settings. However, because, it is $el which has the class settings the binding never match.
This is why when you remove .settings it works, because you say "any 'click' on $el"
The reason the documentation says click .blah is because it assumes that the html element(s) with the class='blah' are children of the $el element.
Hope this help.