Posts Tagged ‘backbone.js’

Getting the back button to work with Backbone and jquery mobile

Posted in Programing, Web Development on January 3rd, 2013 by Jarred – Comments Off on Getting the back button to work with Backbone and jquery mobile

I was getting some strange errors in my app when trying to get the back button to work with the pushState history provided by Backbone.js. I was getting this error: Uncaught TypeError: Cannot call method ‘replace’ of undefined jquery.mobile-1.2.0.min.js:2 I suspected it was a conflict between the “routing” systems provided by jquery mobile and the backbone frameworks. In my search to figure out how to make it work I came across this post here http://coenraets.org/blog/2012/03/using-backbone-js-with-jquery-mobile/ The solution presented in the article however did not work for my as apparently (unknown to me) I was using some of the features that were being disabled. To solve my issues I pared down what the article suggested I disable and then just inserted the code into script tags right after I loaded all the frameworks. I now have a functioning back button in my hybrid jquery mobile/backbone app.

$.mobile.hashListeningEnabled = false;
$.mobile.pushStateEnabled = false;

How not to set Backbone model properties

Posted in Geekdom, Programing on November 29th, 2012 by Jarred – Comments Off on How not to set Backbone model properties

So here is another backbone.js tidbit that took me a while to figure out/understand. This may be fairly straight forward to seasoned programmers, but it really through me for a loop. If you try and set initial model (or view) properties outside of the “defaults” method you can not retrieve them using model.get(‘propertyName’). This was a point of confusion because sometimes it was working like i though it should and sometimes it did not. To further complicate things I was trying to set properties by passing them when I was instantiating the object. It took me a while to figure out what I was doing wrong.

So this is incorrect even though you can still access the object properties.


ExampleModel = Backbone.Model.extend({
propertyName: 'Some Value',
})
exampleModel = new ExampleModel ({propertyName: 'Updated Value'});
exampleModel.propertyName// 'Some Value' not 'Updated Value'

From what I understand this is the correct way to do it


ExampleModel = Backbone.Model.extend({
defaults: {
propertyName: 'Some Value',
},
})
exampleModel = new ExampleModel ({propertyName: 'Updated Value'});
exampleModel.get('propertyName') //'Updated Value'

Now that I understand the concept the documentation makes this very clear to correctly set default model properties using the defaults method.

Problems with binding events on subview in backbone.js

Posted in Programing on November 23rd, 2012 by Jarred – Comments Off on Problems with binding events on subview in backbone.js

I am working on learning backbone.js and well it has been a bumpy road. Along the way I have come across several hiccups, but this one was a doozy and caused me all sorts of frustration. I was trying to to bind a change event to a select menu in one of my subviews. For the life of me I could not get the event to fire correctly. If I copied the exact same event to the parent view it worked just fine. This lead me to believe that I was experience a scope issue. There is lots of information on the web about breaking the scope of “this” in backbone.js which further lead me to believe this was the problem. But turns out that was not the problem at all. After a whole lot of confusion I lucky stumbled upon this post on stackoverflow

Unfortunately it looks like it was not the answer to the original posters problem, but it solved my issue.

According to the post, events in backbone.js are not actually bound to the changing element but rather the root element of the view and then delegated to the children from there. This is important if you are not actually inserting your the root element of your subview into the DOM, because then your events will not fire (which is exactly what I was doing).

So, this render function simply inserts the rendered template html into the DOM which fails to actually insert the views el into the DOM.

render: function() {
$('#anchorDiv').append( this.template(this) );
},

Something like this however will actually insert the view’s root element into the DOM which will (at least in my case) solved all my event issues.
render: function() {
$(this.el).html( this.template(this) );
$('#anchorDiv').append( this.template(this) );
},

I am really liking backbone.js as I think it is helping me better structure my applications. That being said, it has been tough to really learn and grasp how everything is supposed to work. This issue was not straight forward to me at all and hopefully might help somebody out there figure out why their events are not working like they thing they should.