项目基础内容
#去除turbolinks
rails new tutorialapp --skip-turbolinks
#添加gem
gem 'jquery-rails'
#更新js(去除默认的turbolinks)
//= require jquery3
//= require jquery_ujs
项目内容
#resource框架
rails g resource tutorial title:string url:string
#tutorials_controller.rb
class TutorialsController < ApplicationController
def index
@tutorials = Tutorial.all
end
def create
@tutorial = Tutorial.new(params[:tutorial].permit(:title, :url))
if @tutorial.save
render partial: "tutorial", locals: {tutorial: @tutorial}
end
end
def destroy
@tutorial = Tutorial.find(params[:id])
@tutorial.destroy
render json: @tutorial
end
end
#view/tutorial
#index.html.erb
<h1>Tutorials</h1>
<ul id=tutorials>
<%= render @tutorials %>
</ul>
<%= form_with model: Tutorial.new, data: {'js-tutorial-form' => true} do |form| %>
Title <%= form.text_field :title %><br>
URL <%= form.text_field :url %><br>
<%= form.submit %>
<% end %>
#_tutorial.html.erb
<li data-js-tutorial-id=<%= tutorial.id %>>
<%= tutorial.title %> <%= link_to "Delete", tutorial, remote: true, method: :delete,
data: { confirm: "Are you sure you want to delete '#{tutorial.title}'?" } %>
</li>
#application.js
$(document).ready(function() {
//添加
$('[data-js-tutorial-form]').on("ajax:success", function(event, data, status, xhr){
var tutorial = $(xhr.responseText).hide();
$('#tutorials').append(tutorial);
tutorial.fadeIn(2000);
});
//删除
$('[data-js-tutorial-id]').on("ajax:success", function(event, data, status, xhr){
var tutorial_id = xhr.responseJSON.id;
$('[data-js-tutorial-id=' + tutorial_id + ']').hide();
});
});