Question

My super simple backbone app is not picking up a form submission and acting upon it. I have this app sitting on rails which is simply spitting out JSON.

My app is an attempt to recreate James Yu’s CloudEdit & Jérôme Gravel-Niquet’s Todo’s App. I’m only having issues with creating new Song objects. Rails picks up the POST and responds with JSON & HTML when backbone should have processed the form data and added it to the ordered list. I’m using the ICanHaz Gem for JS Templates.

Any ideas?

// Main Application View

window.AppView = Backbone.View.extend({

  el: $("#songs_app"),

  events: {
    "submit form#new_song": "createSong"
  },

  initialize: function(){
    _.bindAll(this, 'addOne', 'addAll');

    Songs.bind('add', this.addOne);
    Songs.bind('reset', this.addAll);
    Songs.bind('all', this.render);

    Songs.fetch(); //This Gets the Model from the Server
  },

  addOne: function(song) {
    var view = new SongView({model: song});
    this.$("#song_list").append(view.render().el);
  },

  addAll: function(){
    Songs.each(this.addOne);
  },

  newAttributes: function(event) {
    var new_song_form = $(event.currentTarget).serializeObject();
    //alert (JSON.stringify(new_dog_form));
    return { song: {
        title: new_song_form["song[title]"],
        artist: new_song_form["song[artist]"]
      }}
  },

  createSong: function(e) {
    e.preventDefault(); //This prevents the form from submitting normally

    var params = this.newAttributes(e);

    Songs.create(params);

    //TODO - Clear the form fields after submitting
  }

});

// Song View

window.SongView = Backbone.View.extend({
    tagName: "li",

    initialize: function(){

    },

    collapse: function(){
        $(this.el).removeClass("active");
    },

    render: function(){
        var song = this.model.toJSON();
        $(this.el).html(ich.song_item(song));
        return this
    },

});

// index.html.erb

<div id="songs_app">
<h1 id="logo">Test App</h1>
<ol id="song_list">
</ol>
</div>
<%= render 'form' %>

<script id="song_item" type="text/html">
<div id='{{id}}'>
    <div class='listTrackContent'>
        <a href="#show/{{id}}">{{title}} by {{artist}}</a>
        <ol class="{{id}}">
        </ol>
    </div>
</div>
</script>

<script id="similar_song_item" type="text/html">
<li>
    <a href="{{trackUrl}}">{{title}}</a> by <a href="{{artistUrl}}">{{artist}}</a>
</li>
</script>

// songs_controller.rb

def create
    @song = Song.new(params[:song])

    respond_to do |format|
        if @song.save
            format.html { redirect_to(@song, :notice => 'Song was successfully created.') }
            format.json  { render :json => @song, :status => :created, :location => @song }
        else
            format.html { render :action => "new" }
            format.json  { render :json => @song.errors, :status => :unprocessable_entity }
        end
    end
end

Answer 1

The problem ended up being the location of my form. I was rendering outside of #songs_app.

Make sure that all your backbone controlled content is inside of “el”. =X