#325 Backbone on Rails Part 2 pro

I never worked with backbone.js, but it seems to me that rails is a bit heavy when you skip most of the rails functionality. Would it not be better to use sinatra or even not use ruby at all? I guess you could use node.js?

testing backbone.js tutorial

Thanks Ryan for all the work on these screencasts.

What a great episode - thank you !!

I'd like to see more episodes on Backbone - like:
- handling associations between models in a Backbone app
- caching data using localStorage
- using multiple view objects and multiple routers
- appCache and Backbone
- testing with Jasmine and Sinon

Awesome job, Ryan!

I found as I started integrating this into existing applications that if I have a large number of datasets, it tries to load all of the data at the initial load. This is because each router is loaded in the base window.App class. Is this how it is supposed to work? I don't expect you to answer this, but if someone can respond, I would appreciate it.

Also, I would love to see a screencast that covers pagination with Backbone.js.. It seems that there is very little documentation on this and it is very complicated to understand. If you could dumb that down for us, I would really appreciate it!

This was great! I (think I) know backbone and this episode had tons of useful extras that either taught me something new, or really solidified a concept - priceless!:

• example where the context changes...
• handling server errors/callbacks in a view
• using wait judiciously
• custom events
• refactoring in backbone
• catchall push state

Here's suggestions for Part 3:

• testing backbone apps
• tdd'ing backbone apps

I agree with the previous comments.
It would be very nice to see this series continue with new episodes!

Keep up the good work!

I really want see next episode about backbone. When I started using backbone with rails I have big problems with rails associations and with more then one backbone router

Made my head hurt... but really great functionality.

It would be interesting to see this in conjunction with the offline app. It seems a whole client side application could persist and pull application updates from the main server when they are available. Potentially sync data, but really have everything live on the client indefinitely... making the web server a software distribution technology and data store rather than an application server technology. This would work wonders for scale.

Thank you for the useful episodes Ryan.

I found it cleaner to use haml_coffee_assets as the template engine as you don't need to write your Html code using javascript. and you can simply use coffeescript inside your haml templates :)

Hello, nice screencast, Thanks!!

Do you know where can I find a nested resources example with backbone?

I want to "nest" entries to users like this: users/:user_id/entries and show them into that nested url (not into users/:user_id).

Hi,

I did a variant of the above Raffler in Spine JS to find out the differences between Spine JS and Backbone. For those of you that are interested, the result can be found here: https://github.com/ygor/spine-raffler

The only thing that I have not been able to figure out yet is how to do the remote validation. Let me know what you think!

What Textmate bundle do you use for .eco files ? I notice the bottom of your textmate window says javascript template. Where can I get it?

Is there any reason to not use the fat arrow (=>) for every method definition in your classes?

These 2 screencasts was really amazing Ryan.
Thank you very much for that stuff.

I always love your clarity (sometimes it's still very complicated though, even if you try to make it as simple as possible ;))

What I don't like with backbone is that you can't generate your forms based on your backend models (as simple_form does it for you)...

Any Idea ?

Great screencast, Ryan. I have been toying around with Backbone and Ember. I hope you do a screencast on ember. I think it is interesting to contrast the end user development strategies between Ember and Backbone. Both libraries offer similar benefits, but are used in pretty different ways.

I like backbone, but being a Rails guy, I think I prefer the approach Ember takes.

Made our heads hurt the first time but made a lot more sense after watching it again! Great work.

We found that it pairs up nicely with the Backbone Codeschool course, which let you play with the individual MVC components one by one, and then your Railscasts show the overall architecture of a Backbone app and how the individual bits come together.

There seem to be a few interesting Backbone plugins springing up in the community - Marionette, LayoutManager, ModelBinding and Forms to name just a few we've come across - any chance of a screencast covering some of these?

At 9:49, my response.responseText contained {"name":["can't be blank"]}
and not {"errors": {"name":["can't be blank"]}} (i.e. there was no "errors" key).

So when parsing the messages within entries/index.js.coffee#handleError method, I did

errors=$.parseJSON(response.responseText)

instead of

errors=$.parseJSON(response.responseText).errors

I have rails 3.1.2, and my web browser is Chrome 16.0.912.77.

I'm having a bunch of trouble trying to make this work beyond what has been said on both screencasts.

I'm simply trying to make a full CRUD, like Rails scaffold, just work. But I'm getting bite by loading times and page rendering.

Anybody else having such problems?

Too complicated for a simple app :(

Why did it trigger an alert function when he clicked each entry (triggering "showEntry" and a new url opened?

Hi I'm wondering if anybody else ran into the problem with drawWinner()

I'm getting the error

Uncaught TypeError: Cannont call methoed 'drawWinner' of undefined.

I've gone back over the code above and copied and pasted it but still no luck. Any ideas?

Thanks
Linda

Thanks Ryan. I started typing out two issues I was having before I did a thorough check of tabs vs. spaces in my coffee file. A quick convert to my preferences fixed both. All, just be careful about this if you get totally unexpected, weird errors :).

When I write "tagName: 'li'" im stuck with an error?

Error: Parse error on line 5: Unexpected '{'
(in /rails_projects/raffler/app/assets/javascripts/views/entries/entry.js.coffee)

How would I change the templates to use Handlebars? I've tried using 'handlebars_assets'. But I'm getting odd errors. Any chances to see versions of /templates/entries/entry.jst.hbs and index.jst.hbs?

I've done a mashup of this rails cast with railscast 295 but changed to use Handlebars instead of Mustache.

Check it out:

https://github.com/etewiah/sharing_handlebars_templates_in_backbone

I am having a problem though with using exactly the same template on both the client and the server. I explain better in the README. Any comments will be appreciated.

Thanks

RailsConf this year had a good talk on Backbone

Thanks Ryan. I'm a new one so permit me to imagine:
Ruby is excellent for oo( object oriented) language. With oo db,such as mongodb, programming will be much more productive.
I love rails, but I think his power is in activerecord. Since relation db is obsolete， rails' value is limited. So
{new :old}
ruby/javascript :java
mongodb :mysql
json :xml
(things like)BB :rails
REST:SOAP
Is my understanding right?

Im getting an error on the validation server side... in fact Im not getting the error alert when the name is not present.

im using rails 3.2.8 and backbone-on-rails 0.9.2.3

In the network console it does state that theres an error with the api/entries, and in the response theres the errors key, but still no alert..

Last few seconds of this talk appears to be cut off as well.

1) Not be amiss to add csrf token in your backbone forms and turn it on in application controller:

def handle_unverified_request
  #TODO add here code to empty the session
  raise ActionController::InvalidAuthenticityToken
end

<input name="authenticity_token" type="hidden" value="<%= $('meta[name="csrf-token"]').attr('content') %>">

That works fine but I doubt that it is really necessary because browsers have ajax crossdomain restrictions anyway.

I am right or not?

2) I just found it handful when you have multiple fields in your forms use backbone-syphon-rails gem. It doing form serialisation for you and you can write something like that:

createNote: (event) ->
    event.preventDefault()
    data = Backbone.Syphon.serialize(this)
    @collection.create data

I'm surprised there were no comments about issues with adding an entry. This took me sometime to figure out so posing here.

I was getting a 500 error when trying to add a name entry:

Completed 500 Internal Server Error in 1ms

ActiveModel::ForbiddenAttributesError (ActiveModel::ForbiddenAttributesError):
  app/controllers/entries_controller.rb:13:in `create'

I guess in rails 4 some extra parameter requirements are needed:
more info here:
http://stackoverflow.com/questions/17868427/rails-4-activemodelforbiddenattributeserror
http://edgeapi.rubyonrails.org/classes/ActionController/StrongParameters.html

Here's my implementation of the fix. Let me know if I overlooked something and this is not really needed please!

In entries_controller.rb

class EntriesController < ApplicationController
  respond_to :json
  
  def index
    respond_with Entry.all
  end
  
  def show
    respond_with Entry.find(params[:id])
  end
  
  def create
    respond_with Entry.create(entry_params)
  end
  
  def update
    respond_with Entry.update(params[:id], params[:entry])
  end
  
  def destroy
    respond_with Entry.destroy(params[:id])
  end

  private
    # permissible attributes.
    def entry_params
      params.require(:entry).permit(:name)
    end

end

Adding:

$('#new_entry')[0].reset()

into my entries_index.js.coffee file under createEntry causes an

ExecJS::RuntimeError in Main#index
SyntaxError: unexpected CALL_START
  (in /Users/lionelramos/Documents/raffler/app/assets/javascripts/views/entries/entries_index.js.coffee)

My log has this:

ActionView::Template::Error (SyntaxError: unexpected JS
  (in /Users/lionelramos/Documents/raffler/app/assets/javascripts/views/entries/entries_index.js.coffee)):

Any thoughts?

I was able to fix the ExecJS error. Had to do with having spaces instead of tabs in my coffeescript function.

I'm still just a little confused about the #container div. There is no #container div in the template, so why and how does that work? Just looking for clarification.

with the latest versions , the event.preventdefault() does not seem to make any difference,any ideas?