json - Backbone 对表单提交没有约束力

Question

我的 super 简单的主干应用程序没有选择表单提交并对其采取行动。我有这个应用程序坐在导轨上，它只是吐出 JSON。

我的应用程序试图重新创建 James Yu's CloudEdit & Jérôme Gravel-Niquet's Todo's App .我只是在创建新的 Song 对象时遇到问题。当主干应该处理表单数据并将其添加到有序列表时，Rails 接收 POST 并以 JSON 和 HTML 响应。我正在将 ICanHaz Gem 用于 JS 模板。

有任何想法吗？

//主应用程序 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
  }

});

//歌曲 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>

//歌曲 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

问题最终是我的表单的位置。我在#songs_app 之外渲染。

确保所有主干控制的内容都在“el”内。 =X