基本的に製品の技術仕様を追跡するために使用される Ruby-on-Rails Web アプリを開発しています。これは、Michael Hartl の Rails チュートリアルに従って以来、初めて RoR アプリを使用することです。私はまだ Ajax や RoR にあまり詳しくないので、自分がこれほど激しいものに取り組んでいることを認識していませんでしたが、やり遂げたいと思っています。
モデルの関係を理解するには、ER 図を参照してください。
私は3つのモデルを持っています:
@entity: { :id, :name, :label, :img }
@group: { :id, :name, :default_label }
@property: { :id, :name, :units, :units_short, :default_label, :default_value, :default_visibility }
次に、これらの各モデルには固有の多対多の関連付け (関係に関する詳細を追跡する必要がある場所) があるため、それらの関連付けのモデルを作成しました。
@group_property_relationship: { :group_id, :property_id, :order }
@entity_group_relationship: { :entity_id, :group_id, :order, :label }
@entity_property_relationship: { :entity_id, :property_id, :group_id, :label, :order, :value, :visibility }
私はすでにこれらのモデルとその関連付けを相互に対話させており、コンソールからは素晴らしく機能します。しかし、複雑になるのはクライアントのセットアップです。どのように見せたいかについては、私のモックアップを参照してください。うまくいけば、これが機能の理解を刺激するでしょう.
ajax を使用してすべてを 1 つのページで管理できるワンストップ ビューを作成しようとしています。ユーザーは、エンティティ、プロパティ、またはグループを作成し、グループとプロパティの間の関連付けを作成し、エンティティとグループの間の関連付けを作成できます。
ここで私の進行状況の静的ビューを参照してください。
https://trello-attachments.s3.amazonaws.com/519e948c97d3fd4579000a79/537fa898eef9844886200be0/463x710/b04e83d4e4e56253a1818048264e1fa3/spex_hub_140617.png
どうやら私はより多くのリンクに対して十分に高い SO の評判を持っていません。検索、並べ替え、およびページネーションはすべて ajax を介して、両方のモデルで互いに独立して機能します。私はこのチュートリアルに従いました：
http://asciicasts.com/episodes/240-search-sort-paginate-with-ajax
その機能のほとんどを取得するには、少し調整する必要がありましたが、Rails 4 用に更新し、1 つのビューで複数のモデルを操作する必要がありました。
しかし、それが機能していないのは、「進行状況」画像の上部近くにあるフォームを使用してこのビューからエンティティが作成されたときです (成功したかどうかに関係なく)。インスタンスが正常に作成され、リストが更新され、並べ替えが機能します。ですが、検索が壊れています。
したがって、エラーを追跡するには、大量のコードを提供する必要があります...次のとおりです。
景色： hub
app/views/hub/main.html.erb
<div id="hub-alert"></div>
<div class="row">
<aside class="col-xs-4 v-divider">
<a style="color: #494A4A" href="<%= entities_path %>">Entities</a>
<section>
<h6>
Create New Entity
</h6>
<%= render 'new_entity' %>
</section>
<section>
<h6>
Existing Entities
</h6>
<%= render partial: 'entities/search', locals: { path: hub_path } %>
<div id="entities">
<%= render 'entities/entities' %>
</div>
<div id='ajax-test'></div>
</section>
</aside>
<aside class="col-xs-4 v-divider">
<a style="color: #494A4A" href="<%= groups_path %>">Groups</a>
<section>
<h6>
Selected Entity's Groups
</h6>
<div id="entitys_groups">
</div>
</section>
<section>
<h6>
Create New Group
</h6>
<%= render 'groups/new' %>
</section>
<section>
<h6>
Existing Groups
</h6>
<%= render partial: 'groups/search', locals: { path: hub_path } %>
<div id="groups">
<%= render 'groups/groups' %>
</div>
<div id='ajax-test'></div>
</section>
</aside>
</div>
エンティティの部分的な作成: _create_entity.html.erb
app/views/hub/_create_entity.html.erb
<h1> Create New Entity</h1>
<div class="row">
<div class="col-xs-10 col-xs-offset-1">
<%= bootstrap_form_for(@entity, url: { controller: "hub", action: "create_entity" }, inline_errors: false, method: :post, remote: true) do |f| %>
<%= render 'entities/fields', f: f %>
<%= f.submit "Create Entity", class: "btn btn-sm btn-primary btn100", id: "create-entity" %>
<% end %>
</div>
</div>
エンティティ検索の一部: _search.html.erb
app/views/entities/_search.html.erb
<%= form_tag path, method: 'get', remote: true do %>
<%= hidden_field_tag :entity_direction, params[:entity_direction] %>
<%= hidden_field_tag :entity_sort, params[:entity_sort] %>
<%= hidden_field_tag :entity_event, true %>
<div class="input-group" style="margin-bottom: 15px">
<%= text_field_tag :entity_search, params[:entity_search], class: "form-control" %>
<span class="input-group-btn" >
<%= submit_tag "Search", name: nil, class: "btn btn-default" %>
</span>
</div>
<% end %>
コントローラ: hub_controller .
app/controllers/hub_controller.rb
class HubController < ApplicationController
helper_method :entity_sort_column, :entity_sort_direction, :group_sort_column, :group_sort_direction
before_action do
unless current_user.nil?
redirect_to root_url unless current_user.admin?
else
redirect_to root_url
end
end
def main
@entities = Entity.search(params[:entity_search]).order(entity_sort_column + ' ' + entity_sort_direction).paginate(page: params[:entities_page], per_page: 10, order: 'created_at DESC')
@groups = Group.search(params[:group_search]).order(group_sort_column + ' ' + group_sort_direction).paginate(page: params[:groups_page], per_page: 10, order: 'created_at DESC')
@entity = Entity.new
@group = Group.new
end
def create_entity
@entity = Entity.find_by(name: entity_params[:name])
@result = {msg: "", r: -1}
@entities = Entity.search(params[:entity_search]).order(entity_sort_column + ' ' + entity_sort_direction).paginate(page: params[:entities_page], per_page: 10, order: 'created_at DESC')
respond_to do |format|
if @entity.nil?
@entity = Entity.new(entity_params)
if !@entity.save
@result[:r] = 0
@result[:msg] = "'#{@entity.name}' failed to save."
else
@result[:r] = 1
@result[:msg] = "'#{@entity.name}' was saved."
#entities needs to be updated to get the latest addition
@entities = Entity.search(params[:entity_search]).order(entity_sort_column + ' ' + entity_sort_direction).paginate(page: params[:entities_page], per_page: 10, order: 'created_at DESC')
end
else
@result[:r] = 0
@result[:msg] = "Name: '#{@entity.name}' is already taken."
end
format.js
format.html { redirect_to hub_path }
end
end
def create_group
#not yet implemented
end
def create_property
#not yet implemented
end
def create_entity_group_relation
#not yet implemented
end
def create_group_property_relation
#not yet implemented
end
private
def entity_params
params.require(:entity).permit(:name, :label, :img)
end
def group_params
params.require(:group).permit(:name, :default_label)
end
def entity_sort_column
Entity.column_names.include?(params[:entity_sort]) ? params[:entity_sort] : "name"
end
def entity_sort_direction
%w[asc desc].include?(params[:entity_direction]) ? params[:entity_direction] : "asc"
end
def group_sort_column
Group.column_names.include?(params[:group_sort]) ? params[:group_sort] : "name"
end
def group_sort_direction
%w[asc desc].include?(params[:group_direction]) ? params[:group_direction] : "asc"
end
end
ルート: routes.rb
Spex::Application.routes.draw do
get "hub/main"
post "hub/create_entity"
post "hub/create_group"
post "hub/create_property"
post "hub/create_entity_group_relation"
post "hub/create_group_property_relation"
get "groups/new"
get "entities/new"
get "entities/hub"
get "properties/new"
resources :users
resources :group_property_relationships
resources :entity_group_relationships
resources :entity_property_relationships
resources :properties do
member do
get :groups, :entities
post :serve
end
end
resources :groups do
member do
get :properties, :entities
post :own
end
end
resources :entities do
member do
get :groups, :properties
post :own
end
end
resources :sessions, only: [:new, :create, :destroy]
root 'static_pages#home'
match '/hub/create_entity', to: 'hub#main', via: 'get'
match '/signup', to: 'users#new', via: 'get'
match '/hub', to: 'hub#main', via: 'get'
match '/signin', to: 'sessions#new', via: 'get'
match '/signout', to: 'sessions#destroy', via: 'delete'
match '/help', to: 'static_pages#help', via: 'get'
end
application.js並べ替えやその他の基本的な関数を ajax 化します。<em>create 呼び出しには何もありません:
/app/assets/javascripts/application.js
$(function()
{
$('#entities').on('click', "th a", function () {
$.getScript(this.href);
return false;
});
$('#groups').on('click', "th a", function () {
$.getScript(this.href);
return false;
});
$("body").on("click", '.pagination a', function(e){
e.preventDefault();
$.getScript(this.href);
return false;
});
$("body").on("click", '.table tr.entity', function(e){
// e.preventDefault();
$.getScript(this.id+"/groups");
// return false;
});
$("[data-toggle='tooltip']").tooltip();
});
create_entityアクションのコールバック js は次のとおりです。
app/views/hub/create_entity.js.erb
var entities_html = " <%= j render 'entities/entities' %>";
$('#entities').html(entities_html)
//clear the entity form fields
$('input[id^=entity]').val('');
var alert_html = "";
<% unless @result.nil? %>
<% if @result[:r] == 1 %>
alert_html += " <div class='alert alert-success'>";
alert_html += " <%= @result[:msg] %>";
alert_html += " </div>";
<% else %>
alert_html += " <div class='alert alert-danger'>";
alert_html += " <%= @result[:msg] %>";
alert_html += " </div>";
<% end %>
<% else %>
alert_html += " <div class='alert alert-danger'>";
alert_html += " There was an error saving #{@entity.name}";
alert_html += " </div>";
<% end %>
$('#hub-alert').html(alert_html);
そのため、この時点で、ルートなどで何かファンキーなことが起こっています。への呼び出し前と呼び出し後に、サーバーが出力する内容に変化が見られcreate_entityます。ほとんどの場合、パラメーターの変更に注意してください。なぜ彼らは変わるのでしょうか？
前：
Started GET "/hub?utf8=%E2%9C%93&entity_direction=&entity_sort=&entity_event=true&entity_search=o+v" for 127.0.0.1 at 2014-06-17 14:48:13 -0600
Processing by HubController#main as JS
Parameters: {"utf8"=>"✓", "entity_direction"=>"", "entity_sort"=>"", "entity_event"=>"true", "entity_search"=>"o v"}
User Load (0.2ms) SELECT "users".* FROM "users" WHERE "users"."remember_token" = 'e39061f2d24bec8416f5319586f87f27def3804c' LIMIT 1
DEPRECATION WARNING: #apply_finder_options is deprecated. (called from main at /Users/astoutj/Documents/Work/_sync/Work-sync/ror/workspace/spex/app/controllers/hub_controller.rb:13)
DEPRECATION WARNING: #apply_finder_options is deprecated. (called from main at /Users/astoutj/Documents/Work/_sync/Work-sync/ror/workspace/spex/app/controllers/hub_controller.rb:14)
Entity Load (0.5ms) SELECT "entities".* FROM "entities" WHERE ((name LIKE '%o%' OR label LIKE '%o%' OR created_at LIKE '%o%' OR updated_at LIKE '%o%') AND (name LIKE '%v%' OR label LIKE '%v%' OR created_at LIKE '%v%' OR updated_at LIKE '%v%')) ORDER BY name asc, created_at DESC LIMIT 10 OFFSET 0
Rendered entities/_entity.html.erb (1.5ms)
Rendered entities/_entities.html.erb (8.0ms)
Group Load (0.4ms) SELECT "groups".* FROM "groups" ORDER BY name asc, created_at DESC LIMIT 10 OFFSET 0
(0.1ms) SELECT COUNT(*) FROM "groups"
Rendered groups/_group.html.erb (10.4ms)
Rendered groups/_groups.html.erb (19.2ms)
Rendered entities/_entity.html.erb (1.2ms)
Rendered entities/_entities.html.erb (6.3ms)
Rendered hub/main.js.erb (45.5ms)
Completed 200 OK in 53ms (Views: 49.3ms | ActiveRecord: 1.2ms)
後：
Started GET "/hub?utf8=%E2%9C%93&entity_direction=&entity_sort=&entity_event=&entity_search=o+v" for 127.0.0.1 at 2014-06-17 14:48:33 -0600
Processing by HubController#main as JS
Parameters: {"utf8"=>"✓", "entity_direction"=>"", "entity_sort"=>"", "entity_event"=>"", "entity_search"=>"o v"}
User Load (0.2ms) SELECT "users".* FROM "users" WHERE "users"."remember_token" = 'e39061f2d24bec8416f5319586f87f27def3804c' LIMIT 1
DEPRECATION WARNING: #apply_finder_options is deprecated. (called from main at /Users/astoutj/Documents/Work/_sync/Work-sync/ror/workspace/spex/app/controllers/hub_controller.rb:13)
DEPRECATION WARNING: #apply_finder_options is deprecated. (called from main at /Users/astoutj/Documents/Work/_sync/Work-sync/ror/workspace/spex/app/controllers/hub_controller.rb:14)
Group Load (0.4ms) SELECT "groups".* FROM "groups" ORDER BY name asc, created_at DESC LIMIT 10 OFFSET 0
(0.1ms) SELECT COUNT(*) FROM "groups"
Rendered groups/_group.html.erb (6.0ms)
Rendered groups/_groups.html.erb (14.8ms)
Entity Load (0.7ms) SELECT "entities".* FROM "entities" WHERE ((name LIKE '%o%' OR label LIKE '%o%' OR created_at LIKE '%o%' OR updated_at LIKE '%o%') AND (name LIKE '%v%' OR label LIKE '%v%' OR created_at LIKE '%v%' OR updated_at LIKE '%v%')) ORDER BY name asc, created_at DESC LIMIT 10 OFFSET 0
Rendered entities/_entity.html.erb (2.1ms)
Rendered entities/_entities.html.erb (12.8ms)
Rendered hub/main.js.erb (35.7ms)
Completed 200 OK in 44ms (Views: 39.4ms | ActiveRecord: 1.5ms)
質問:作成アクションが後続の検索アクションを妨げないようにするにはどうすればよいですか?
他に何か必要な場合はお知らせください。