Develop Reference

BackboneJS Hide Model when date has expired

I have a Backbone App where I display a Collection of Models based on JSON data. Inside the JSON data, I have endDate-which gives me the realtime date. It is based on a competition module. What I want to achieve is that if the given date has expired I want to hide (or even maybe remove) the Model from the collection, so that the competition is no longer available.
So far my competition.js, with the Model in the bottom looks like this:
Competition.View = Backbone.View.extend({
tagName: 'ul',
template: 'competition',
initialize: function() {
this.listenTo(this.model, 'sync', this.render);
},
serialize: function() {
return this.model.toJSON();
}
});
Competition.CompetitionModel = Backbone.Model.extend({
url: function() {
return App.APIO + '/i/contests';
},
comparator: function(item) {
return item.get('endDate');
},
defaults: {
"data": []
}
});
Then in my main module, I import the competition.js, and here I fetch the model and render it in specific HTML element (dont know if its necessary to copy/paste it here for my original question):
function (App, Backbone, Competition) {
var CompetitionOverview = App.module();
CompetitionOverview.View = Backbone.View.extend({
template: 'competitionOverview',
initialize: function(){
this.render();
},
beforeRender: function() {
var competitionModel = new Competition.CompetitionModel();
this.insertView('.singleComp', new Competition.View({model: competitionModel}));
competitionModel.fetch();
},
});
return CompetitionOverview;
}
So, how can I achieve to hide/remove the Models which dates have expired?
thanks in advance...

You state that you have Collection of Models, but your Competition.CompetitionModel extends Backbone.Model instead of Backbone.Collection. In my answer I assume that CompetitionModel is a Backbone.Collection and not a Backbone.Model.
That said, I think you have two options:
Check in your render function of Competition.View whether you should actually show something based on the end-date:
Competition.View = Backbone.View.extend({
tagName: 'ul',
template: 'competition',
initialize: function() {
this.listenTo(this.model, 'sync', this.render);
},
serialize: function() {
return this.model.toJSON();
},
render: function(){
//dependending on in which format your date is you might have to convert first.
if(this.model.get('endDate') < new Date().getTime()){
//render the view
}
});
Or, and I think this is more clean, you check the date as soon as the data comes in from the server. I think backbone triggers an "add" event on the collection when the collection is fetched from the server. So, again, make your Competition Model a Competition Collection and listen to the add event. Change
Competition.CompetitionModel = Backbone.Collection.extend({
initialize: function () {
this.on("add", checkDate)
},
checkDate: function(model, collection, options){
//again, get the right conversion
//but here you should compare your end date with the expire date
if(model.get('endDate') < new Date().getTime()){
this.remove(model.id);
}
},
url: function () {
return App.APIO + '/i/contests';
},
comparator: function (item) {
return item.get('endDate');
},
defaults: {
"data": []
}
});

How do I fill my view with my new backbone collection data after a reset?

I have a model called TimesheetRow and a collection called TimesheetRows.
If I make a call to TimesheetRows.reset(newCollection); where newCollection is a collection of four TimesheetRow models in JSON format, four new model views appear on my page.
How can I fill these input and select fields with the values from the new collection? I've noticed that if I change a field on one of the four models, the collection itself is properly updated, it seems like a one-way bind (does that make sense?).
Here is some code, I apologize for the quantity.
var TimesheetRow = Backbone.Model.extend({
defaults: function () {
return {
MondayHours: 0,
TuesdayHours: 0,
WednesdayHours: 0,
ThursdayHours: 0,
FridayHours: 0,
SaturdayHours: 0,
SundayHours: 0,
JobNo_: null,
PhaseCode: null,
TaskCode: null,
StepCode: null,
WorkTypeCode: null,
Description: "",
};
},
clear: function () {
this.destroy();
}
});
var TimesheetRowList = Backbone.Collection.extend({
model: TimesheetRow,
});
var TimesheetRows = new TimesheetRowList;
var TimesheetRowView = Backbone.View.extend({
template: _.template($('script.timesheetTemplate').html()),
events: {,
"change input" : "changed",
"change select" : "changed"
},
render: function () {
Backbone.Model.bind(this);
this.$el.html(this.template(this.model.toJSON())).hide().slideDown();
return this;
},
initialize: function () {
_.bindAll(this, "changed");
//this.model.bind('change', this.render, this);
//this.model.bind('reset', this.render, this);
this.model.bind('destroy', this.remove, this);
},
changed: function (evt) {
var changed = evt.currentTarget;
var value = this.$("#"+changed.id).val();
var obj = "{\""+changed.id.replace("Timesheet", "") +"\":\""+value+"\"}";
var objInst = JSON.parse(obj);
this.model.set(objInst);
},
});
var TimesheetRowsFullView = Backbone.View.extend({
el: $("#timesheet-rows-container-view"),
events: {
"click #add-new-timesheet-row" : "createRow",
"click #submit-new-timesheet" : "submitTimesheet",
"click #request-sample-timesheet" : "requestTimesheet"
},
initialize: function () {
TimesheetRows.bind('add', this.addOne, this);
TimesheetRows.bind('reset', this.addAll, this);
TimesheetRows.bind('all', this.render, this);
},
addOne: function (timesheetrow) {
var view = new TimesheetRowView({ model: timesheetrow });
this.$("#timesheet-start-placeholder").prepend(view.render().el);
},
addAll: function () {
TimesheetRows.each(this.addOne);
},
render: function () {
//Is this the code I'm missing?
},
createRow: function () {
TimesheetRows.create();
},
requestTimesheet: function () {
//newCollection is retrieved from database in code that I've excluded.
TimesheetRows.reset(newCollection);
}
});
var TimesheetRowsFullViewVar = new TimesheetRowsFullView();
In my changed function, I include Timesheet prefix because my IDs on those fields are all prefixed with Timesheet.
I know for a fact that my new JSON collection object is correctly formatted.
The two lines that are commented out in the TimesheetRowView initialize function were giving me trouble when I would update fields. I'm not sure if they are required or not.
Questions:
When I "reset", my previous model views are still present, how would I get rid of them? Should I use JQuery?
I expect at some point I need to add the Timesheet prefix back on, for the models to find the right IDs. At which step or in which function do I do this? (This ties in to the "one-way bind" I mentioned.)
I've been following along slightly with the TODO application, and I didn't find any of the code in the render function to be necessary for my side, in the FullView. Is this where I'm missing code?

collection.reset() only removes the models from your collection and put other collection in there if you pass them as a param.
To have your views removed from DOM you should do it yourself.
A way to do it is to listen to the reset event it triggers when all is done and create a method that removes your views from the DOM.
Or
Just remove then in that requestTimesheet method of yours.

Backbone.js model event not triggering

I've got the following view file:
var BucketTransferView = Backbone.View.extend(
{
initialize: function(args)
{
_.bindAll(this);
this.from_bucket = args.from_bucket;
this.to_bucket = args.to_bucket;
},
events:
{
'click input[type="submit"]' : 'handleSubmit',
},
render: function()
{
$(this.el).html(ich.template_transfer_bucket(this.model.toJSON()));
return this;
},
handleSubmit: function(e)
{
that = this;
this.model.save(
{
date: 1234567890,
amount: this.$('#amount').val(),
from_bucket_id: this.from_bucket.get('id'),
to_bucket_id: this.to_bucket.get('id')
},
{
success: function()
{
// recalculate all bucket balances
window.app.model.buckets.trigger(
'refresh',
[that.to_bucket.get('id'), that.from_bucket.get('id')]
);
}
}
);
$.colorbox.close();
}
});
My buckets collection has this refresh method:
refresh: function(buckets)
{
that = this;
_.each(buckets, function(bucket)
{
that.get(bucket).fetch();
});
}
My problem is that when the fetch() happens and changes the collection's models, it's not triggering change events in other view classes that has the same models in it. The view's models have the same cid, so I thought it would trigger.
What's the reason this doesn't happen?

Fetch will create new model objects. Any view that's tied to the collection should bind to the collection's reset event and re-render itself. The view's models will still have the same cid's because they're holding a reference to an older version of the model. If you look at the buckets collection it probably has different cids.
My suggestion is in the view that renders the buckets, you should render all the child views and keep a reference to those views. then on the reset event, remove all the child views and re-render them.
initialize: function()
{
this.collection.bind('reset', this.render);
this._childViews = [];
},
render: function()
{
_(this._childViews).each(function(viewToRemove){
view.remove();
}, this);
this.collection.each(function(model){
var childView = new ChildView({
model: model
});
this._childViews.push(childView);
}, this)
}
I hope this works for you, or at least gets you going in the right direction.

Loading initial data in Backbone.js

I'm new to backbone.js and MVC so apologise if this is a silly question...
I have been experimenting with some of the backbone.js tutorials out there and am trying to work out how to load an initial set of data onto the page.
If anyone could point me in the right direction or show me the what I'm missing below, it would be greatly appreciated!
Thanks!
The code is below or at: http://jsfiddle.net/kiwi/kgVgY/1/
The HTML:
Add list item
The JS:
(function($) {
Backbone.sync = function(method, model, success, error) {
success();
}
var Item = Backbone.Model.extend({
defaults: {
createdOn: 'Date',
createdBy: 'Name'
}
});
var List = Backbone.Collection.extend({
model: Item
});
// ------------
// ItemView
// ------------
var ItemView = Backbone.View.extend({
tagName: 'li',
// name of tag to be created
events: {
'click span.delete': 'remove'
},
// `initialize()` now binds model change/removal to the corresponding handlers below.
initialize: function() {
_.bindAll(this, 'render', 'unrender', 'remove'); // every function that uses 'this' as the current object should be in here
this.model.bind('change', this.render);
this.model.bind('remove', this.unrender);
},
// `render()` now includes two extra `span`s corresponding to the actions swap and delete.
render: function() {
$(this.el).html('<span">' + this.model.get('planStartDate') + ' ' + this.model.get('planActivity') + '</span> <span class="delete">[delete]</span>');
return this; // for chainable calls, like .render().el
},
// `unrender()`: Makes Model remove itself from the DOM.
unrender: function() {
$(this.el).remove();
},
// `remove()`: We use the method `destroy()` to remove a model from its collection.
remove: function() {
this.model.destroy();
}
});
// ------------
// ListView
// ------------
var ListView = Backbone.View.extend({
el: $('body'),
// el attaches to existing element
events: {
'click button#add': 'addItem'
},
initialize: function() {
_.bindAll(this, 'render', 'addItem', 'appendItem'); // every function that uses 'this' as the current object should be in here
this.collection = new List();
this.collection.bind('add', this.appendItem); // collection event binder
this.render();
},
render: function() {
_(this.collection.models).each(function(item) { // in case collection is not empty
appendItem(item);
}, this);
},
addItem: function() {
var item = new Item();
var planStartDate = $('#planStartDate').val();
var planActivity = $('#planActivity').val();
item.set({
planStartDate: planStartDate,
planActivity: planActivity
});
this.collection.add(item);
},
appendItem: function(item) {
var itemView = new ItemView({
model: item
});
$('ul', this.el).append(itemView.render().el);
}
});
var listView = new ListView();
})(jQuery);
Thanks.

Here's the modified example: http://jsfiddle.net/kgVgY/2/
You create the collection first with the data you want
var list = new List([{
createdOn: 'Jan',
createdBy: 'John',
planStartDate: "dfd",
planActivity: "dfdfd"
}]);
and then pass the collection to the view you want
var listView = new ListView({collection: list});
That's about all you had wrong in this code. Few minor unrelated notes:
You were using _(this.collection.models).each. Backbone collections use underscore to expose all those functions on themselves, so that is equivalent to this.collection.each
You don't really need the "unrender" method on the ItemView but since you aren't using that I'm guessing you're using it for debugging.

In a Backbone app what is work of model, views and collections by convention

I am right now developing a dead simple application using backbonejs mvc javascript library.Just to show how simple it is here is the html
Sample Html
<div class="container">
<div>
<label>
Name:
<input id="txtName" type="text" title="Type your name please" /></label>
<button id="btnSubmit" type="button" value="Submit">
Submit</button>
</div>
<div id="names">
</div>
</div>
Operation
Here's all i want the application to do.
User Types a name(or some alphanumeric string) and clicks submit.
The value(which is what they call model i suppose) after validation will be sent to restful service.
Service will return the same string along with status of database save operation.
I am now confused as to where the click event will handled(is it in the model?), after that where should the render method be called?(is it in views). Below you will find the script i had managed up until now
Model.js
//store a global reference to model
window["model"] = Backbone.Model.extend({
defaults: { name: "Type your name"
},
validate: function () {
}
});
View.js
//store a global reference to view
window["view"] = Backbone.View.extend({});
nothing in the view to say :(
Application.js
//when every thing is ready kick of the application
$(document).ready(function () {
var modelInstance = new model();
});
so do i add click event to the button in application.js or model.js.which is the convention/best practice?
Will it be possible for me to render the names collection returned from service into #names and status of the database insertion into another div somewhere up above the container? Can the view render both views?

So, here is a disclaimer: If this is all your app is doing, then Backbone is way too much ceremony. When the app gets more complex with more moving parts, Backbone becomes pretty amazing.
That being said, I have created a jsFiddle to highlight how you might use Backbone for what you want to do: http://jsfiddle.net/BrianGenisio/CZwnk/4/
Basically, you have a Person model and a People collection to hold the Person models. You then have three views: NewPersonView which is the form for entering your data, which is responsible for adding new items to the People collection. Then you have a PeopleView view which is responsible for showing People collection, which will watch the collection and show any additions. Finally, is the PersonView which is responsible for showing an individual Person model.
When it all comes together, it looks a little something like this:
HTML:
<script id="new_person_template" type="text/template">
<label>
Name:
<input id="txtName" type="text" title="Type your name please" />
</label>
<button id="btnSubmit" type="button" value="Submit">Submit</button>
</script>
<script id="person_template" type="text/template">
Hello, my name is <%= name %>
</script>
<div id="container">
</div>
JavaScript
window.app = {};
window.app.Person = Backbone.Model.extend({
defaults: { name: "Type your name" },
validate: function () { }
});
window.app.People = Backbone.Collection.extend({
model: window.app.Person
});
window.app.NewPersonView = Backbone.View.extend({
template: _.template($("#new_person_template").html()),
initialize: function () {
_.bindAll(this, 'submit');
},
events:
{
"click #btnSubmit": "submit"
},
render: function () {
$(this.el).html(this.template());
return this;
},
submit: function (x, y, z) {
// If you want this to go up to the server and sync, do this instead:
// this.model.create({name: $("#txtName").val()});
// but since we don't really have a server right now, we'll just create and add
var person = new window.app.Person({name: $("#txtName").val()});
this.model.add(person);
}
});
window.app.PersonView = Backbone.View.extend({
tagname: "li",
template: _.template($("#person_template").html()),
render: function() {
$(this.el).html(this.template(this.model.toJSON()));
return this;
}
});
window.app.PeopleView = Backbone.View.extend({
tagName: "ul",
initialize: function() {
_.bindAll(this, "render", "renderPerson");
this.model.bind("add", this.renderPerson);
},
render: function() {
console.log("rendering");
this.model.each(this.renderPerson);
return this;
},
renderPerson: function(person) {
var personView = new window.app.PersonView({model: person});
$(this.el).append(personView.render().el);
}
});
$(document).ready(function () {
var people = new window.app.People();
var newPersonView = new window.app.NewPersonView({model: people});
var peopleView = new window.app.PeopleView({model: people});
$("#container").html(newPersonView.render().el);
$("#container").append(peopleView.render().el);
});

i would do the click in the view
you would need 2 views in my eyes, 1 is an appview that holds your entire app
the other is just a view for each usermodel you render out in your list .
here is your user model
var User = Backbone.Model.extend({
defaults: {
id: 0,
name: 'no-name'
}
});
here is your collection
var Users = Backbone.Collection.extend({
model: User,
create : function(model, options) {
var coll = this;
options || (options = {});
if (!(model instanceof Backbone.Model)) {
model = new this.model(model, {collection: coll});
} else {
model.collection = coll;
}
var success = function(savedModel, resp) {
coll.add(savedModel);
if (options.success) options.success(nextModel, resp);
// fire success event
coll.trigger("savesuccess", savedModel);
};
var error = function(resp) {
if(options.error) options.error(resp);
// fire error event
coll.trigger("saveerror");
}
return model.save(null, {success : success, error : error});
}
});
so here is a possible user view
var UserRow = Backbone.View.extend({
tagName: "li",
initialize: function(){
_.bindAll(this, 'render');
this.model.bind('change', this.render);
},
className: "user",
render: function() {
var user = this.model;
$(this.el).html(user.get('name'));
return this;
}
});
here is your appView
var AppView = Backbone.View.extend({
el: 'body',
events: {
'click button#btnSubmit': 'addUser'
},
initialize: function(){
this.collection = new Users();
this.collection.bind('add', this.appendUser);
this.collection.bind('savesuccess', this.saveSuccess);
this.collection.bind('saveerror', this.saveError);
this.counter = 0;
this.render();
},
addUser: function(){
this.counter++;
var user = new User();
user.set({
id: user.get('id') + this.counter,
name: $('#txtName', this.el).val()
});
this.collection.add(user);
},
appendUser: function(user){
var userRow = new UserRow({
model: user
});
$('ul#names', this.el).append(userRow.render().el);
},
saveSuccess: function(user){
alert('successfully saved, you can append something to the AppView DOM to show that saving was successful ...');
},
saveError: function(){
alert('failed to save, you can append something to the AppView Dom to show that saving failed, or remove the item again ...');
}
});
here you initialize it all
var App = new AppView();
as you can see, rendering the items itself does not happen after saving it in the database, it is added to the collection, the appView binds to the add event of the collection and appends the new user to your list.
the CRUD server connection works automatically, due to using the create function on the collection.
the idea here is that you don't need to user backbone events, trigger an event from your collections successful save or error save, and let any view bind to that event to make something happen on the screen when save was a success or not.