4
私の超シンプルなバックボーンアプリは、フォーム提出を取り上げてそれに対処していません。私はこのアプリをJSONを吐き出しているレール上に置いています。バックボーンがフォーム提出にバインドされていません
私のアプリは、再作成しようとしていますJames Yu's CloudEdit & Jérôme Gravel-Niquet's Todo's App私は、新しいソングオブジェクトの作成にのみ問題があります。 RailsはPOSTをピックアップし、バックボーンがフォームデータを処理して順序付きリストに追加する必要があるときに、JSON & HTMLで応答します。私はJSテンプレート用にICanHaz Gemを使用しています。
アイデア？ // 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
//メインアプリケーションビュー
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_appの外でレンダリングしていました。 @ mu-is-too-short – muffs
あなたの問題をうれしく思いました。自分の質問に正式に答えて、人々がそれを振り返ったり、この質問を完全に削除したりする必要があります。ありがとう！ –
よろしくお願いします。ありがとう;） – muffs