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
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With