2011-07-25 23 views
4

我的超級簡單骨幹應用沒有選擇表單提交併對其採取行動。我有這個應用程序坐在只是吐出JSON的鐵軌上。骨幹對錶單提交沒有約束力

我的應用程序試圖重新創建James Yu's CloudEdit & Jérôme Gravel-Niquet's Todo's App。我只是在創建新的歌曲對象時遇到問題。當骨幹網應該處理表單數據並將其添加到有序列表中時,Rails將接收POST並用JSON &作出響應。我爲JS模板使用ICanHaz Gem。

任何想法?

//主應用程序視圖

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 
    } 

}); 

//宋查看

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 
+0

問題最終成爲我的表單的位置。我在#songs_app之外渲染。 @ mu-is-too-short – muffs

+0

很高興你解決了你的問題。你應該正式回答你自己的問題,這樣人們可以回頭看看它,或者完全刪除這個問題。謝謝! –

+0

良好的通話!謝謝 ;) – muffs

回答

9

問題最終成爲我的表單的位置。我在#songs_app之外渲染。

確保所有的骨幹控制內容都在「el」之內。 = X