使用Rails、backbone.js 和accepts_nested_attributes_for 保存嵌套对象

使用Rails、backbone.js和accepts_nested_attributes_for保存嵌套对象

ruby
# app/models/article.rb
class Article < ApplicationRecord
  has_many :comments
  accepts_nested_attributes_for :comments
end
# app/models/comment.rb
class Comment < ApplicationRecord
  belongs_to :article
end

ruby
# app/controllers/articles_controller.rb
class ArticlesController < ApplicationController
  def new
    @article = Article.new
    @article.comments.build
  end
  def create
    @article = Article.new(article_params)
    if @article.save
      redirect_to @article
    else
      render 'new'
    end
  end
  private
  def article_params
    params.require(:article).permit(:title, :content, comments_attributes: [:body])
  end
end

javascript
// app/assets/javascripts/views/article_form.js
var ArticleFormView = Backbone.View.extend({
  events: {
    'click #add-comment': 'addComment'
  },
  
  initialize: function() {
    this.comments = this.$('#comments');
  },
  
  addComment: function() {
    var commentView = new CommentFormView({ model: new Comment() });
    this.comments.append(commentView.el);
  }
});

javascript
// app/assets/javascripts/views/comment_form.js
var CommentFormView = Backbone.View.extend({
  template: _.template($('#comment-form-template').html()),
  
  events: {
    'click .remove-comment': 'removeComment'
  },
  
  initialize: function() {
    this.render();
  },
  
  render: function() {
    this.$el.html(this.template());
  },
  
  removeComment: function() {
    this.remove();
  }
});

html
<%= form_for @article do |f| %>
  <%= f.label :title %>
  <%= f.text_field :title %>
  
  <%= f.label :content %>
  <%= f.text_area :content %>
  
  
    <%= f.fields_for :comments do |comment_form| %>
      <%= render 'comment_fields', f: comment_form %>
    <% end %>
  
  
  <%= link_to '添加评论', '#', id: 'add-comment' %>
  
  <%= f.submit '保存' %>
<% end %>