Develop Reference

Remove corresponding item when delete button is clicked. BackboneJs

I am currently learning BackboneJs and trying to understand how Backbone handles events. I have a simple list of items and each item has a delete button right next to it. I'm trying to figure out why the click event(Delete button) is registered in the console but the item is not removed. Here's what I have:
var Vehicle = Backbone.Model.extend();
var Vehicles = Backbone.Collection.extend({
model: Vehicle
});
/*************
single view
**************/
var VehicleView = Backbone.View.extend({
tagName: 'li',
className: 'vehicle',
render: function() {
this.$el.html(this.model.get("title") + " Registration Number is: " + this.model.get("regiNum") + " <button class='delete-btn'>Delete</button>");
this.$el.attr("id", this.model.id);
return this;
}
});
/*************
Collection View
*************/
var VehiclesView = Backbone.View.extend({
tagName: "ul",
initialize: function() {
this.model.on('remove', this.vehicleRemove, this);
},
events: {
"click .delete-btn": "vehicleRemove"
},
vehicleRemove: function(vehicle) {
this.$("li#" + vehicle.id).remove() // this is not working. the item is not being removed
console.log('Delete button clicked') // this is registered in the console log
},
render: function() {
var self = this;
this.model.each(function(vehicle) {
var vehicleView = new VehicleView({
model: vehicle
});
self.$el.append(vehicleView.render().$el);
})
}
});
var vehicles = new Vehicles([
new Vehicle({
id: 1,
title: "Toyota",
regiNum: "453454624"
}),
new Vehicle({
id: 2,
title: "Honda",
regiNum: "daf4526"
}),
new Vehicle({
id: 3,
title: "Audi",
regiNum: "jlkjfa34"
})
])
var vehiclesView = new VehiclesView({
el: "#container",
model: vehicles
});
vehiclesView.render();
Please help me out or point me to the right direction would be greatly appreciated.

Since you have an item view, it's better to give it the functionality for removing itself. This way you don't have to hack your way reading stuff from DOM to find the related model based on the clicked item view element.
Also, you should use the remove() method of Backbone.View rather than the jQuery remove() method, because it safely removes the backbone events registered on the view, as well as calls jQuery remove() to remove the element from DOM.
You can call model.destroy() which will signal your persistence layer to remove the model and removes it from collection as well. Since you don't have a persistence layer in this example, I'm triggering a custom event on the item view's model which is handled in the collection for removing the model from it (model events propagates to it's collection).
There is no need to manually initialize models in a collection by yourself, backbone does it automatically, that's what the collections model property is for.
You should use some sort of templating engine rather than doing string manipulation in the view for rendering, you have _.template() at your disposal anyway.
Also, as dskoda1 already mentioned, you shouldn't pass a Backbone.Collection using the model option, model and collection are two options that will be detected by Backbone.view. Even if it does no harm, it's still very confusing.
var Vehicle = Backbone.Model.extend();
var Vehicles = Backbone.Collection.extend({
model: Vehicle,
initialize: function() {
this.on('delete', this.remove);
}
});
var VehicleView = Backbone.View.extend({
tagName: 'li',
className: 'vehicle',
template: _.template($('#vehicle-template').html()),
events: {
"click .delete-btn": "vehicleRemove"
},
initialize: function() {
this.render();
},
render: function() {
this.$el.html(this.template(this.model.toJSON()));
return this;
},
vehicleRemove: function(vehicle) {
this.remove();
//this.model.destroy(); /* The collection should have a url */
this.model.trigger('delete', this.model);
},
});
var VehiclesView = Backbone.View.extend({
tagName: "ul",
initialize: function() {
this.render();
},
render: function() {
this.collection.each(function(vehicle) {
var vehicleView = new VehicleView({
model: vehicle
});
this.$el.append(vehicleView.$el);
}, this)
}
});
var vehicles = new Vehicles([{
id: 1,
title: "Toyota",
regiNum: "453454624"
}, {
id: 2,
title: "Honda",
regiNum: "daf4526"
}, {
id: 3,
title: "Audi",
regiNum: "jlkjfa34"
}]);
var vehiclesView = new VehiclesView({
el: "#container",
collection: vehicles
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.3/backbone-min.js"></script>
<div id="container"></div>
<script type="text/template" id="vehicle-template">
<%=title%>Registration Number is:
<%=regiNum%>
<button class='delete-btn'>Delete</button>
</script>

A useful atrribute you might want to use on the buttons would be data-id. Setting this value to the models id would allow you to more cleanly select the correct model for deletion. The new button html would now be:
"<button class='delete-btn' data-id=" + this.model.get('id') + ">Delete</button>"
Having buttons like this, the new click event could be fired as such:
vehicleRemove: function(e) {
e.preventDefault(); //Good practice for button clicks
var id = $(e.currentTarget).data('id'); //Id of model clicked
//Only one of these next two lines needs to be used
this.collection.remove(id); //If not persisting to server
this.collection.remove(id).destroy() //If persisting to server
},
Also, when you instantiate your VehiclesView, since you're passing it a collection called vehicles, that attribute should really be called collection, not model. An attribute named model is typically used on a single model view, or to represent which model a collection represents. The appropriate changes would need to be made inside of VehiclesView, i.e. replace every instance of the word model with collection.

this.remove() ?
At this point, Backbone already knows which model you're trying to delete so there is no need to specify a jQuery selector.
Of course, .remove() is only going to remove the element from the DOM. Are you looking for model.destroy() which will send a DELETE command to the server?

How do I get Backbone to render the subView properly?

I am relatively new to Backbone.js and having difficulty rendering a subView. I have subViews in other parts of the app working properly, but I cant even render simple text in this one.
View:
Feeduni.Views.UnifeedShow = Backbone.View.extend({
template: JST['unifeeds/show'],
tagName: "section",
className: "unifeed-show",
render: function() {
var content = this.template({ unifeed: this.model });
this.$el.html(content);
var subView;
var that = this;
this.model.stories().each(function(stories) {
subView = new Feeduni.Views.StoriesShow({ model: stories });
that.subViews.push(subView);
that.$el.find(".show-content").append(subView.render().$el);
});
return this;
},
});
Subview:
Feeduni.Views.StoriesShow = Backbone.View.extend({
template: JST['stories/show'],
tagName: "div",
className: 'stories-show',
render: function() {
this.$el.text("Nothing shows up here");
return this;
},
});
Model:
Feeduni.Models.Unifeed = Backbone.Model.extend({
urlRoot: "/api/uninews",
stories: function() {
this._stories = this._stories || new Feeduni.Subsets.StoriesSub([], {
parentCollection: Feeduni.all_unifeeds
});
return this._stories;
},
});
The text "Nothing shows up here" should be displaying in the "show content" element, but all I get is this:
<section class="unifeed-show">
<article class="show-content">
</article>
</section>

Below is a slight modification of your code showing a working main view managing some sub-views.
var UnifeedShow = Backbone.View.extend({
// I've hard-coded the template here just for a sample
template: _.template("Feed: <%= feedName %><br/> <ul class='show-content'></ul>"),
className: "unifeed-show",
initialize: function () {
// Create an array to store our sub-views
this.subViews = [];
},
render: function () {
var content = this.template(this.model.toJSON());
this.$el.html(content);
var subView;
var that = this;
var subViewContent = this.$el.find(".show-content");
this.model.stories().each(function (story) {
var subView = new StoryShow({
model: story
});
this.subViews.push(subView);
subViewContent.append(subView.render().$el);
}, this);
return this;
}
});
var StoryShow = Backbone.View.extend({
tagName: 'li',
// This template will show the title
template: _.template('Title: <%= title %>'),
className: 'stories-show',
render: function () {
var content = this.template(this.model.toJSON());
this.$el.html(content);
return this;
},
});
var Unifeed = Backbone.Model.extend({
stories: function () {
// I'm just returning the value set on this model as a collection;
// You may need to do something different.
return new Backbone.Collection(this.get('stories'));
}
});
// ================================
// Code below is creating the model & view, then rendering
// ================================
// Create our model
var feed = new Unifeed();
// Put some data in the model so we have something to show
feed.set('feedName', 'A Sample Feed');
feed.set('stories', [{
title: "Story #1",
id: 1
}, {
title: "Story #2",
id: 5
}]);
// Create our main view
var mainView = new UnifeedShow({
model: feed,
el: $('#main')
});
// Render it, which should render the sub-views
mainView.render();
Here's a working JSFiddle:
https://jsfiddle.net/pwagener/7o9k5d6j/7/
Note that while this manual sort of sub-view management works OK, you'll be better off using something like a Marionette LayoutView to help manage parent and sub-views. It builds good best practices for this sort of thing without you needing to do it yourself.
Have fun!

The subview is named Feeduni.Views.StoriesShow but in your main view you are instantiating new Feeduni.Views.StoryShow. Name them consistently and see if you still have problems.

Handlebars won't loop over my Backbone.js Collection

I have a Backbone app where I'm attempting to populate a collection using a JSON file. I want to generate a list of "titles" from the JSON to eventually turn into a menu.
Everything is going well, except that Handlebars won't loop (each) over my collection to render the list.
The relevant view:
var MenuView = Backbone.View.extend({
template: Handlebars.compile(
'<ul>' +
'{{#each items.models}}<li>{{attributes.title}}</li>{{/each}}' +
'</ul>'
),
initialize: function () {
this.listenTo(this.collection, "reset", this.render);
},
render: function () {
this.$el.html(this.template(items));
return this;
}
});
The model and collection:
var Magazine = Backbone.Model.extend({
urlRoot:"/items",
defaults: {
id: '',
title: '',
pubDate: '1/1',
image: ''
}
});
var MagazineMenu= Backbone.Collection.extend({
comparator: 'title',
model: Magazine,
url: "/items"
});
The router:
var MagazineRouter = Backbone.Router.extend({
routes: {
"" : "listPage",
"titles/:id" : "showTitle"
},
initialize: function () {
this.magazineModel = new Magazine();
this.magazineModel.fetch();
this.magazineView = new MagazineView({
model: this.magazineModel
});
this.magazineCollection = new MagazineMenu();
this.magazineCollection.fetch();
this.menuView = new MenuView({collection: this.magazineCollection});
},
showTitle: function(id) {
this.magazineModel.set("id", id);
$("#theList").html(this.magazineView.render().el);
},
listPage : function() {
$('#theList').html(this.menuView.render().el);
}
});
var router = new MagazineRouter();
$(document).ready(function() {
Backbone.history.start();
});
And finally the JSON:
[
{
"id": "screamingzebras",
"url": "screamingzebras",
"title": "Screaming Zebras",
"pubDate": "2/1",
"image": "screamingzebras.jpg"
},
{
"id": "carousellovers",
"url": "carousellovers",
"title": "Carousel Lovers",
"pubDate": "3/1",
"image": "carousellovers.jpg"
},
{
"id": "gardenstatuary",
"url": "gardenstatuary",
"title": "Garden Statuary",
"pubDate": "4/1",
"image": "gardenstatuary.jpg"
},
{
"id": "sombreromonthly",
"url": "sombreromonthly",
"title": "Sombrero Monthly",
"pubDate": "1/1",
"image": "sombreromonthly.jpg"
}
]
When I run this in a browser, I get no errors in the console. If I console.log(this.collection) just before the call to this.$el.html(this.template(items)); in the view, I can see the collection with a models attribute that is properly populated from the JSON.
When I look at the Elements panel in Chrome dev tools, I can see that it is generating everything up to and including the <ul> tag. That leads me to believe that I'm just missing a key logic point that is getting the Handlebars each function to actually loop over the collection.

I see two problems here:
items isn't defined anywhere so your render is really saying this.template(undefined).
Even if you did have a local variable called items, your Handlebars template won't know that you've called it items so it won't know that {{#each items.models}} should iterator over it.
Presumably your items is really supposed to be the view's this.collection and your render should look more like this:
render: function () {
this.$el.html(this.template(this.collection));
return this;
}
That should solve problem 1. You can fix problem 2 in two ways:
Change the template to refer to the right thing.
Change how you call this.template so that items is associated with the right thing.
The first option would use the above render and a template that looks like this:
<ul>
{{#each models}}
<li>{{attributes.title}}</li>
{{/each}}
</ul>
The second option would leave your template alone but change render to use:
this.$el.html(
this.template({
items: this.collection
})
);
Another option would be to use this.collection.toJSON() to supply data to the template, then render would use:
this.$el.html(
this.template({
items: this.collection.toJSON()
})
);
and then template would be:
<ul>
{{#each items}}
<li>{{title}}</li>
{{/each}}
</ul>

Getting a Paragraph that changes with dropdown using Backbone.js

I've gotten my dropdown to be populate with lessons, but then I am stuck trying to figure out how I can get the text beneath my dropdown to change based on what the user selects by using Backbone.js
I am populating a select by adding options containing my Lessons and having the title show. Now I am just stuck on where should I insert the text so that it will change based on the selection.
Here is my HTML:
<script type="text/template" id="lesson-template">
<span class="lesson-title"><%= title %></span>
//How should I insert the text?
</script>
<script type="text/template" id="library-template">
<h1> Lesson Library </h1>
<select class="lessons"></select>
</script>
Here is my JSON file where I pull the information, I want to show the title now:
[{
"title": "Intro",
"text":"Do this now"
},
{
"title": "Second",
"text":"And then this"
}]
This is what is included in my javascript file:
window.Lesson = Backbone.Model.extend({});
window.Lessons = Backbone.Collection.extend({
model: Lesson,
url: './lessons.json'
});
window.library = new Lessons();
window.LessonView = Backbone.View.extend({
tagName: 'option',
className: 'lesson',
initialize: function() {
_.bindAll(this,'render');
this.model.bind('change',this.render);
this.template = _.template($('#lesson-template').html());
},
render: function() {
var renderedContent = this.template(this.model.toJSON());
$(this.el).html(renderedContent);
return this;
}
});
window.LibraryLessonView = LessonView.extend({
});
window.LibraryView = Backbone.View.extend({
tagName: 'section',
className: 'library',
initialize: function() {
_.bindAll(this, 'render');
this.template = _.template($('#library-template').html());
this.collection.bind('reset', this.render);
},
render: function() {
var $lessons,
collection = this.collection;
$(this.el).html(this.template({}));
$lessons = this.$('.lessons');
this.collection.each(function(lesson) {
var view = new LibraryLessonView({
model: lesson,
collection: collection
});
$lessons.append(view.render().el);
});
return this;
}
});

First give an id to each lesson.
window.LessonView = Backbone.View.extend({
...
render: function() {
var renderedContent = this.template(this.model.toJSON());
$(this.el).html(renderedContent);
// Then put the id as the option's value
$(this.el).val(this.model.get('id'));
return this;
}
...
});
window.LibraryView = Backbone.View.extend({
...
// bind the select's onchange event to this.onSelect
events: {
'change select': 'onSelect'
},
...
...
onSelect: function(e) {
// Grab the id of the select lesson
var lessonId = $(e.target).val();
// And get the lesson data back
var lesson = _.indexBy(this.collection.toJSON(), 'id')[lessonId];
// Then you could render you lesson view with something like this :
$('#target-container').html(
_.template($('#lesson-template').html(), lesson)
);
},
...
});
You could also go for a more elaborate views / collections construct but I'd suggest you get this working first.

Backbone Sorting and Updating a listview after an action

i am trying to make my first backbone app, and have run into a problem that i just cant solve..
I have a list of links, each link has a counter next to it,
when i click on a link i want the counter to increment by 1. (i have made this, and it is working)
Next i want the link i clicked to move up in the list IF the counter value is higher than the link above.
like this.
first link (4)
second link (3)
third link (3) <-- if i click on this link i want it to move up above second link.
I have tried using comparator and sortBy, but each time i try something i just cant seem to re-render the view and also have the link move up one spot.
I did manage to sort the list initially, when the main view is initialized.
But updating the view and list placement after i click one of the links i cant figure out how to accomplish.
my code:
(function() {
window.App = {
Models: {},
Collections: {},
Views: {}
};
window.template = function(id) {
return _.template( $('#' + id).html() );
};
//Modellen
App.Models.Task = Backbone.Model.extend({
defaults: {
name: 'Foo Bar Baz',
uri: 'http://www.google.com',
counter: 0
},
validate: function(attr) {
if ( ! $.trim(attr.name) ) {
return 'En opgave kræver en title.';
};
}
});
//Collection
App.Collections.Tasks = Backbone.Collection.extend({
model: App.Models.Task,
comparator: function(task) {
return task.get('counter');
},
});
//Singel view
App.Views.TaskView = Backbone.View.extend({
tagName: 'li',
template: template('Tasks'),
initialize: function() {
this.model.on('change', this.render, this);
this.model.on('destroy', this.remove, this);
},
events: {
'click .edit' : 'retTask',
'click .delete' : 'destroy',
'click .uriLink' : 'addCounter'
},
retTask: function() {
var newTaskNavn = prompt('Hvad skal det nye navn være', this.model.get('name'));
if ( !newTaskNavn ) return;
this.model.set('name', newTaskNavn);
},
destroy: function() {
this.model.destroy();
},
addCounter: function(e) {
e.preventDefault();
var newCounter = this.model.get('counter');
this.model.set('counter', newCounter + 1);
},
remove: function() {
this.$el.remove();
},
render: function() {
this.$el.html(this.template(this.model.toJSON()) );
return this;
}
});
//Collection View
App.Views.TasksView = Backbone.View.extend({
tagName: 'ul',
initialize: function() {
this.collection.on('add', this.addOne, this);
this.render();
},
render: function() {
this.collection.each(this.addOne, this);
return this;
},
addOne: function(task) {
var taskView = new App.Views.TaskView({ model: task });
this.$el.append(taskView.render().el);
}
});
App.Views.AddTask = Backbone.View.extend({
el: '#addTask',
initialize: function() {
},
events: {
'submit' : 'submit'
},
submit: function(e) {
e.preventDefault();
var taskNavn = $(e.currentTarget).find('.navnClass').val(),
uriNum = $(e.currentTarget).find('.uriClass').val();
if ( ! $.trim(taskNavn)) {
var test = prompt('opgaven skal have et navn', '');
if ( ! $.trim(test)) return false;
taskNavn = test;
}
if( uriNum.indexOf( "http://" ) == -1 ) {
addedValue = 'http://',
uriNum = addedValue + uriNum;
}
$(e.currentTarget).find('input[type=text]').val('').focus();
//var task = new App.Models.Task({ name: taskNavn, uri: uriNum });
this.collection.add({ name: taskNavn, uri: uriNum });
}
});
// new tasks collection
var tasks = new App.Collections.Tasks([
{
name: 'Foo',
uri: 'www.google.com',
counter: 3
},
{
name: 'Bar',
uri: 'http://google.com',
counter: 2
},
{
name: 'Baz',
uri: 'http://www.google.com',
counter: 1
}
]);
// tasks.comparator = function(task) {
// return task.get("counter");
// };
tasks.sort();
// new collection view (add)
var addTaskView = new App.Views.AddTask({ collection: tasks});
// new collection view
var tasksView = new App.Views.TasksView({ collection: tasks });
$('.tasks').html(tasksView.el);
})();
My HTML: (if someone wanna try to replicate the scenario :)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>LinkList</title>
</head>
<body>
<h1>Mine opgaver</h1>
<form action="" id="addTask">
<input class="navnClass" type="text" placeholder="Link name"><input clas s="uriClass" type="text" placeholder="www.url-here.com">
<button class="nyOpgave">Ny opgave</button><br />
</form>
<div class="tasks">
<script type="text/template" id="Tasks">
<span class="linkNavn"><%= name %></span> - <%= uri %> : [<span class="counterClass"><%= counter %></span>] <button class="edit">Edit</button> <button class="delete">Delete</button>
</script>
</div>
<script src="js/underscore.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
<script src="js/jquery.js"></script>
<script src="js/backbone.js"></script>
<script src="main.js"></script>
</body>
</html>
can anyone please help me figure this one out ?
/Cheers
Marcel

Okay , i have created the application for you , as you have intended it to run.I'm going to try and explain you the entire code , what i have written and why i have written.
First , take a look at the JSfiddle : here
Next , let me explain :
1.This is my model that stores the name of the link , href , the id(not used in my example but its just good practise to assign a unique id to each model) and finally the number of clicks to a link(model).
var myModel = Backbone.Model.extend({
defaults:{
'id' : 0,
'name' : null,
'link' : '#',
'clicks' : 0
}
});
2.This the collection , that stores all my models , i have added a comparator function so that when ever you add a model to a collection , it will sort the collection.
Note : i have added a - sign to sort the collection in descending order of clicks (link with maximum click to appear first)
var myCollection = Backbone.Collection.extend({
model: myModel,
comparator: function(item) {
return -item.get('clicks');
}
});
3.Now this is my main view , what do i mean main view ? This view does the main rendering of the list , that you want to show.Pretty self explanatory code here.One thing , the this.coll.bind('add change',this.render,this) , i have added a 'change' because whenever any of the models in this collection change , we want to re-render the entire list , this happens when i change the count of any link , on clicking it , i want to re-render the entire list.
var myView = Backbone.View.extend({
el: $("#someElement"),
tagName : 'ul',
initialize: function() {
this.coll = new myCollection();
this.coll.bind('add change',this.render,this);
},
events: {
"click #add": "add"
},
add: function(e){
e.preventDefault();
var mod = new myModel();
var name = $('#name').val();
var link = $('#link').val();
mod.set({'id':mod.cid, 'name':name,'link':link});
this.coll.add(mod);
},
render : function(){
$('#list').empty();
this.coll.sort();
this.coll.forEach(function(model){
var listItem = new printView({ model: model});
$('#list').append(listItem.render().el);
});
}
});
4.This is my sub-view , why do i ever make a second view , why isnt 1 view sufficient ?
Well this consider a scenario, with every link you have a delete button (for instance) when i click the delete button (and i have just 1 view) how do i identify which model to destroy(remove from collection ? ) , 1 possible way would be to associate a cid with each model and then on click i can do a this.coll.getByCid() , but this isnt such a good way to do it , IMHO , so i created a separate view for each model.This View renders each model and returns nothing more.
var printView = Backbone.View.extend({
tagName: 'li',
initialize : function(options) {
_.bindAll(this, "render");
},
events:{
"click a": "count"
},
render:function(){
var linkName = this.model.get("name");
var link= this.model.get("link");
var clicks = this.model.get("clicks");
this.$el.append("<a class='link' href='"+link+"'>"+linkName+"</a> ("+clicks+")");
return this;
},
count:function(e){
e.preventDefault();
e.stopPropagation();
var clicks = this.model.get("clicks");
clicks++;
this.model.set({'clicks':clicks});
}
});
5.Initializing my (main) myView
new myView();
Note: I do believe that this application/code can be written in much better way , with several improvements but with my calibre and with the fact that it works ( :p ) i think it can help you.

The collection comparator is only executed when new models are added to the collection: it doesn't update the collection order when properties change. In order to achieve this, you need to call collection.sort():
App.Collections.Tasks = Backbone.Collection.extend({
model: App.Models.Task,
initialize: function() {
this.on('change:counter', this.sort);
},
comparator: function(task) {
return task.get('counter');
}
});
In the list view you can listen to the collection's sort event, and re-render your view:
App.Views.TasksView = Backbone.View.extend({
tagName: 'ul',
initialize: function() {
this.collection.on('add', this.addOne, this);
this.collection.on('sort', this.render, this);
this.render();
},
render: function() {
//if there are existing child views, remove them
if(this.taskViews) {
_.each(this.taskViews, function(view) {
view.remove();
});
}
this.taskViews = [];
this.collection.each(this.addOne, this);
return this;
},
addOne: function(task) {
var taskView = new App.Views.TaskView({ model: task });
this.$el.append(taskView.render().el);
//keep track of child views
this.taskViews.push(taskView);
}
});