Unable to bind click event in Backbone - javascript

I can't seem to bind a click event to an action in the snippet below. Any ideas?
var SelectView = Backbone.View.extend({
template: "#select-template",
initialize: function() {
this.render();
},
events: {
"click .placeholder": "optionsDropdown",
},
render: function() {
context = {className: this.className, options: this.model.get("options"), placeholder: this.model.get("placeholder")};
$(this.el).html(getHTML(this.template, context));
},
optionsDropdown: function() {
alert("Hello");
},
});

I think the problem is this line
className: this.className
I don't see the className variable anywhere in the view definition
var SelectView = Backbone.View.extend({
initialize: function () {
this.className = 'placeholder';
},
events: {
"click .placeholder": "optionsDropdown",
},
render: function () {
context = {
className: this.className,
options: this.model.get("options"),
placeholder: this.model.get("placeholder")
};
var template = _.template( $("#select-template").html(), context );
this.$el.html(template);
},
optionsDropdown: function () {
alert("Hello");
},
});
var Model = Backbone.Model.extend({});
var newModel = new Model({
'options' : 'Hello',
'placeholder' : 'Type your name'
});
var newView = new SelectView({model : newModel});
newView.render();
$('.container').append(newView.el);
Check Fiddle
You are binding the click event for the class="placeholder" which is supposed to be in the template. Once you define that it should work provided that you have the element with that class in your template.
Calling render from initialize

You're missing a selector in the event definition. It should be something like this (assuming the input id is optionsId):
events : {
"click #optionsId": "optionsDropDown"
}

you can have a DOM element binded to the handler e.g., "click li":"optionsDropDown"
edit: you are missing the target element.. heres a working fiddle
http://jsfiddle.net/FGeJd/

Related

Backbone doesn't see Model changes on initialization. Is it normal?

On the Model initialization it sets some params. On the View initialization is the listener which must catch that event. But it doesn't. However it can do that on following events (like a button's click). So questions:
Is it normal behavior?
If yes then what is purpose of that
If not, what is my error?
The place to play is here: http://plnkr.co/edit/ddIZrkoI1n1CE6YrvMrC?p=preview
$(function(){
var Mod = Backbone.Model.extend({
defaults:{
test:null
},
initialize: function(){
this.set('test', 'hello');
console.log(this.attributes);
}
});
var Vw = Backbone.View.extend({
events : {
'click #btn-change' : function(){
var mod_value = $('[name="data-input"]').val();
console.log('mod_value: '+mod_value);
this.model.set('test', mod_value);
}
},
initialize: function(){
console.dir({
model: this.model,
view: this
});
this.listenTo(this.model, 'change', function(){
console.log('%cModel changed', 'font-size:18px; color: navy');
console.log({
model_changed: this.model.changed,
keys: _.keys(this.model.changed),
attributes: this.model.attributes
});
$('#new-data').html('<h4>Model is changed</h4>'+this.model.get('test'));
});
}
});
var md = new Mod(), nv = new Vw({
model: md,
el:$('body')
});
});
If you need that set event in model's initialization, as model.changed won't change until next set, and your handler doesn't depend on the params given by the event, you can either manually call the change event handler in your view's init, as Altered Plunker, or use model.trigger('change', ...) to trigger the change handler.
$(function(){
var Vw = Backbone.View.extend({
events : {
'click #btn-change' : function(){
var mod_value = $('[name="data-input"]').val();
console.log('mod_value: '+mod_value);
this.model.set('test', mod_value);
}
},
initialize: function(){
console.dir({
model: this.model,
view: this
});
// Pull the handler out as an attr of view's
this.listenTo(this.model, 'change', this.onModelChanged);
// Manually call the handler to get the changes made by mode's
// initialization.
this.onModelChanged();
},
onModelChanged: function(){
console.log('%cModel changed', 'font-size:18px; color: navy');
console.log({
model_changed: this.model.changed,
keys: _.keys(this.model.changed),
attributes: this.model.attributes
});
$('#new-data').html('<h4>Model is changed</h4>'+this.model.get('test'));
}
});
var Mod = Backbone.Model.extend({
defaults:{
test:null
},
initialize: function(){
this.set('test', 'hello');
console.log(this.attributes);
}
});
var md = new Mod(), nv = new Vw({
model: md,
el:$('body')
});
});

Backbone.js: Using Embeded Javascript inside the View

I'm trying to make the View dynamic as when someone touches the item, but using the '<%= myClassName %>' inside the View doesn't work. I can't use this technique inside the HTML file as it would draw another element and that's not the idea. Also I have set a template but it has nothing on it. I just did that to relate jQuery Mobile into a data-role="content" and render the view inside the content. Any ideas?
Here is what I have:
app.js
var TodoItem = Backbone.Model.extend({
toggleStatus: function(){
if(this.get('status') === 'incomplete'){
this.set({'status': 'complete'});
} else {
this.set({'status': 'incomplete'});
}
this.save();
// PUT /TODOS/1
}
});
var TodoItems = Backbone.Collection.extend({
model: TodoItem,
localStorage: new Backbone.LocalStorage("button"),
initialize: function () {
this.on('remove', this.hideModel, this);
},
hideModel: function (model) {
model.trigger('hide');
}
});
var TodosView = Backbone.View.extend({
initialize: function () {
this.collection.on('add', this.addOne, this);
},
addOne: function (todoItem) {
var todoView = new TodoView({ model: todoItem });
this.$el.append(todoView.render().el);
},
addAll: function () {
this.collection.forEach(this.addOne, this);
},
render: function() {
this.collection.forEach(this.addOne, this);
this.addAll;
return this;
}
});
var TodoView = Backbone.View.extend({
tagName: 'span',
// THIS IS THE MAIN PROBLEM
className: '<%= status %>',
// END COMMENT
template: _.template( $('#personTemplate').html() ),
events: {
"touchstart": "toggleStatus",
"touchend": "toggleStatus"
},
toggleStatus: function () {
this.model.toggleStatus();
},
remove: function(){
this.$el.remove();
},
initialize: function(){
this.render();
this.model.on('change', this.render, this);
this.model.on('destroy', this.remove, this);
this.model.on('hide', this.remove, this);
},
render: function () {
var attributes = this.model.toJSON();
this.$el.html(this.template(attributes));
return this;
}
});
var todoItems = new TodoItems([
{
description: 'Jeffrey Way',
status: "incomplete",
id: 1
},
{
description: 'John Doe',
status: "incomplete",
id: 2
},
{
description: 'Sally Doe',
status: "incomplete",
id: 3
}
]);
var todosView = new TodosView({
el: $('#elem'),
collection: todoItems
});
todosView.render().el
You can do
this.$el.addClass(this.model.get('status'))
inside the view's render method.
Trying to use a template value in the view code doesn't make any sense; those properties are set when the object is parsed, so how would it know which object to fetch the status from?
The best thing todo, if i understand correctly, is to listen to the change:status in your view, and adding/removing a class to your view according to the value of status.
in your initialize of TodoView:
this.listenTo(this.model, 'change:status', this.changeStatus);
in your TodoView declare:
changeStatus : function(model, value, options)
{
// add a class or toggle it or change something in the view..
}
Solution 1
var TodoView = Backbone.View.extend({
tagName: 'span',
...})
var x=new TodoView ({className:'sample'});
Solution 2
Use a template!
var TodoView = Backbone.View.extend({
template="<span class=<%-className%>>Some Stuff Goes Here</span>",
...
render:function(){
var $ele=$(_.template(this.template,{className:'sample'}));
this.$el.replaceWith($ele);
this.$el=$ele;
this.delegateEvents(); //inbuilt-method, to re-bind all event handlers
});

Backbone: bind event happen multiple times

I make a simple todo app:
var Todo = Backbone.Model.extend({
});
var Todos = Backbone.Collection.extend({
model: Todo
});
var todos = new Todos();
var ItemView = Backbone.View.extend({
tagName: "li",
template: _.template($("#item-template").html()),
render: function () {
this.$el.html(this.template(this.model.toJSON()));
return this;
},
initialize: function () {
this.listenTo(todos, 'remove', this.remove);
},
events: {
"click .delete": "clear"
},
clear: function () {
todos.remove(this.model);
}
});
var AppView = Backbone.View.extend({
el: $("body"),
initialize: function () {
this.listenTo(todos, 'add', this.addOne);
},
addOne: function(todo) {
var view = new ItemView({
model: todo
});
this.$("#list").append(view.render().el);
},
events: {
"click #create": "create"
},
create: function () {
var model = new Todo({
title: this.$("#input").val()
});
todos.add(model);
}
})
var app = new AppView();
and DEMO online is here: http://jsfiddle.net/JPL94/1/
I can add item correctly, but when I want delete some item, all of them been removed;
I found it related to the bind event in ItemView, when I click one delete button, all of them are triggered.
But how can I solve this problem?
You are listening to remove events from the collection, and if my memory serves me right a collection will dispatch a remove event whenever a model is removed, so when you remove a model from the collection, all the views will see the event.
I changed your initialize in the view to
initialize: function () {
this.listenTo(this.model, 'remove', this.remove);
},
And it seems to work.
http://jsfiddle.net/JPL94/5/

Collection add event listener in Backbone

I am trying to update my view whenever I add a new model to my collection. My first question is do I automatically add a model to my collection when I save that model, like:
PostsApp.Views.Form = Backbone.View.extend({
template: _.template($('#form-template').html()),
render: function(){
this.$el.html(this.template(this.model.toJSON()));
},
events:{
'click button' : 'save'
},
save: function(e){
console.log("is this working");
e.preventDefault();
var newname = this.$('input[name=name-input]').val();
var newadress = this.$('input[name=adress-input]').val();
this.model.save({name: newname, adress : newadress});
}
});
or do I still have to do collection.add()
Other than that to see the new model in my view I am trying to add an 'add' event listener like this:
PostsApp.Views.Posts = Backbone.View.extend({
initialize: function(){
this.collection.on('add', this.addOne, this);
},
render: function(){
this.collection.forEach(this.addOne, this);
},
addOne: function(post){
var postView = new PostsApp.Views.Post({model:post});
postView.render();
this.$el.append(postView.el);
}
});
This not only doesnt work, but when I add the initialize method, it just duplicates everything in my model when the page is first loaded.
Nope.. When you do a model.save , it will just create a zombie model ( If it not already a part of the collection .i.e If a New model is saved) which is not a part of any collection.
So your add event will not be triggered for the collection.
If you want the add event to be triggered , Use the create method of collection , which then will know on which collection the new model has to be added..
collection.create({model});
Then it would internally add the model to the collection and fire the add event
Also it is a better idea to use listenTo instead of attaching events using on
this.listenTo(this.collection, 'add', this.addOne);
Code
PostsApp.Views.Form = Backbone.View.extend({
template: _.template($('#form-template').html()),
render: function () {
this.$el.html(this.template(this.model.toJSON()));
},
events: {
'click button': 'save'
},
save: function (e) {
console.log("is this working");
e.preventDefault();
var newname = this.$('input[name=name-input]').val();
var newadress = this.$('input[name=adress-input]').val();
this.collection.create({
name: newname,
adress: newadress
});
}
});
PostsApp.Views.Posts = Backbone.View.extend({
initialize: function () {
this.listenTo(this.collection, 'add', this.addOne);
},
render: function () {
this.collection.forEach(this.addOne, this);
},
addOne: function (post) {
var postView = new PostsApp.Views.Post({
model: post,
collection : this.collection
});
postView.render();
this.$el.append(postView.el);
}
});

How to get value of the last changed option on a combobox

Pure jQuery version:
$('select#register-type').live('change', function () {
console.log($(this).val());
});
Backbone view delegate event version:
App.Views.register = new (Backbone.View.extend({
tagName: 'section',
id: 'content',
template: _.template($('script.register').html()),
render: function () {
this.$el.html(this.template);
return this;
},
events: {
'change select#register-type': 'type'
},
type: function (event) {
// i want to console.log the current option selected...
}
}));
How can I achieve that? It seems i cant use $(this) like the jquery version, and this is referred to the register view object...
Use event.target
type: function (event) {
$(event.target).find('option:selected').val();
**OR**
$(event.target).val();
}

Categories