Rails 3'te js.erb dosyalarının işlenmesi

Question

AJAX ve JQuery'yi http://stjhimy.com/posts/07-creating-a-100-ajax-crud-using-rails-3-and-unobtrusive-javascript'da belirtilene benzer şekilde kullanmak için standart bir iskele oluşturulmuş uygulamayı dönüştürüyorum.

Ben tüm talimatları takip: 2 partials kullanarak kompozit Endeksi görünümü oluşturma

• ;
• Denetleyiciyi güncelledi, yalnızca İndeks Oluştur, Oluştur, Düzenle, Güncelle ve Yok Et eylemleri;
• DOM'yi güncellemek için JQuery işlevlerini kullanan eylemleri oluşturmak, düzenlemek, güncellemek ve yok etmek için js.erb dosyaları oluşturun. Js.erb dosyalarına hiçbir şekilde erişilemiyor gibi görünebilir.

Örneğin, görünüm dosyaları ile de js.erb koyun app/views/customers/create.js.erb

create.js.erb kodudur:

<% if @customer.errors.any? -%> 

    /*Hide the Flash Notice div*/ 
    $("#flash_notice").hide(300); 

    /*Update the html of the div customer_errors with the new one*/ 
    $("#customer_errors").html("<% @customer.errors.full_message.each do |msg| %> 
           <li><%= msg %></li> 
           <% end %>"); 

    /*Show the div customer_errors*/ 
    $("#cust0mer_errors").show(300); 

<% else -%> 

    /*Hide the div customer_errors*/ 
    $("#customer_errors").hide(300); 

    /*Update the html of the div flash_notice with the new one */ 
    $("#flash_notice").html("<%= flash[:notice] %>"); 

    /*Show the flash_notice div*/ 
    $("#flash_notice").show(300); 

    /*Clear the entire form*/ 
    $(":input:not(input[type=submit])").val(""); 

    /*Replace the html of the div posts_list with the updated new one*/ 
    $("#customers_list").html("<%= render "customers" %>"; 

    <% end %> 

formları için kod aşağıda:

index.html.erb dosya

<div id="customer_form"><%= render 'form' %></div> 
<div id="customers_list"><%= render 'customers' %></div> 

_form.html, erb kısmi dosya

<%= form_for(@customer, :remote => true) do |f| %> 


    <div id="customer_errors" style="display:none"></div> 

    <div class="field"> 
    <%= f.label :firstname %> 
    <%= f.text_field :firstname %> 
    <%= f.label :lastname %> 
    <%= f.text_field :lastname %> 
    </div> 
    <div class="field"> 
    <%= f.label :email %> 
    <%= f.text_field :email %> 
    <%= f.label :phone %> 
    <%= f.text_field :phone %> 
    </div> 
    <div class="field"> 
    <%= f.label :password %> 
    <%= f.text_field :password %> 
    <%= f.label :address_id %> 
    <%= f.text_field :address_id %> 
    </div> 
    <div class="actions"> 
    <%= f.submit %> 
    </div> 
<% end %> 

kısmi _customers.html.erb için dosyasıdır:

<table> 
    <tr> 
    <th>Firstname</th> 
    <th>Lastname</th> 
    <th>Email</th> 
    <th>Phone</th> 
    <th>Password</th> 
    <th>Address</th> 
    <th></th> 
    <th></th> 
    <th></th> 
    </tr> 

<% @customers.each do |customer| %> 
    <tr> 
    <td><%= customer.firstname %></td> 
    <td><%= customer.lastname %></td> 
    <td><%= customer.email %></td> 
    <td><%= customer.phone %></td> 
    <td><%= customer.password %></td> 
    <td><%= customer.address_id %></td> 
    <td><%= link_to 'Edit', edit_customer_path(customer), :remote => true %></td> 
    <td><%= link_to 'Destroy', customer, :remote => true, :confirm => 'Are you sure?', :method => :delete %></td> 
    </tr> 
<% end %> 
</table> 

---

Düzenleme

Müşteriler kumandanın

son sürümü:

class CustomersController < ApplicationController 

    before_filter :load 

    def load 
    @customers = Customer.all 
    @customer = Customer.new 
    end 

    def index 
    end 


    def create 
    @customer = Customer.new(params[:customer]) 
    if @customer.save 
     flash[:notice] = "Customer was successfully created." 
     @customers = Customer.all 
     respond_to do |format| 
     format.js 
     end 

    end 
    end 

    def edit 
    @customer = Customer.find(params[:id]) 
    respond_to do |format| 
     format.js 
    end 
    end 

    def update 
    @customer = Customer.find(params[:id]) 
    if @customer.update_attributes(params[:customer]) 
     flash[:notice] = "Customer was successfully updated." 
     @customers = Customer.all 
     respond_to do |format| 
     format.js 
     end 
    end 
    end 

    def destroy 
    @customer = Customer.find(params[:id]) 
    @customer.destroy 
    flash[:notice] = "Customer successfully destroyed" 
    @customers = Customer.all 
    respond_to do |format| 
     format.js 
    end 
    end 
end 

son sürümü düzen şablonu, Jquery.js fille'i rai'ye chanse ettikten sonra aşağıdaki gibi etiketler içerir ls.js

<%= stylesheet_link_tag :all %> 
     <%= javascript_include_tag 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' %> 
     <%= javascript_include_tag 'rails' %> 
     <%= csrf_meta_tag %> 

Son günlükleri: Eğer form ve link_to nesneleri oluştururken

Started GET "/customers" for 127.0.0.1 at Wed Dec 14 21:16:14 +0000 2011 
    Processing by CustomersController#index as HTML 
    Customer Load (1.3ms) SELECT "customers".* FROM "customers" 
Rendered customers/_form.html.erb (14.1ms) 
Rendered customers/_customers.html.erb (28.1ms) 
Rendered customers/index.html.erb within layouts/application (47.6ms) 
Completed 200 OK in 74ms (Views: 56.3ms | ActiveRecord: 1.3ms) 


Started GET "/customers/13/edit" for 127.0.0.1 at Wed Dec 14 21:17:20 +0000 2011 
    Processing by CustomersController#edit as JS 
    Parameters: {"id"=>"13"} 
    Customer Load (1.1ms) SELECT "customers".* FROM "customers" 
    Customer Load (0.5ms) SELECT "customers".* FROM "customers" WHERE "customers"."id" = 13 LIMIT 1 
Rendered customers/_form.html.erb (16.1ms) 
Rendered customers/edit.js.erb (17.6ms) 
Completed 200 OK in 43ms (Views: 27.6ms | ActiveRecord: 1.5ms) 


Started GET "/customers/13/edit" for 127.0.0.1 at Wed Dec 14 21:17:31 +0000 2011 
    Processing by CustomersController#edit as JS 
    Parameters: {"id"=>"13"} 
    Customer Load (1.0ms) SELECT "customers".* FROM "customers" 
    Customer Load (0.3ms) SELECT "customers".* FROM "customers" WHERE "customers"."id" = 13 LIMIT 1 
Rendered customers/_form.html.erb (25.9ms) 
Rendered customers/edit.js.erb (28.8ms) 
Completed 200 OK in 52ms (Views: 39.0ms | ActiveRecord: 1.3ms) 


Started DELETE "/customers/18" for 127.0.0.1 at Wed Dec 14 21:18:31 +0000 2011 
    Processing by CustomersController#destroy as JS 
    Parameters: {"id"=>"18"} 
    Customer Load (1.0ms) SELECT "customers".* FROM "customers" 
    Customer Load (0.4ms) SELECT "customers".* FROM "customers" WHERE "customers"."id" = 18 LIMIT 1 
    AREL (0.4ms) DELETE FROM "customers" WHERE "customers"."id" = 18 
    Customer Load (0.7ms) SELECT "customers".* FROM "customers" 
Rendered customers/_customers.html.erb (120.3ms) 
Rendered customers/destroy.js.erb (122.1ms) 
Completed 200 OK in 198ms (Views: 134.1ms | ActiveRecord: 2.5ms) 


Started GET "/customers" for 127.0.0.1 at Wed Dec 14 21:20:00 +0000 2011 
    Processing by CustomersController#index as HTML 
    Customer Load (1.6ms) SELECT "customers".* FROM "customers" 
Rendered customers/_form.html.erb (19.1ms) 
Rendered customers/_customers.html.erb (23.8ms) 
Rendered customers/index.html.erb within layouts/application (50.6ms) 
Completed 200 OK in 76ms (Views: 54.9ms | ActiveRecord: 1.6m 

Answer 1

, aksi takdirde rota JS yoluyla eylemi işlemek olmaz Üzerlerinde bir :remote => true olduğundan emin olun gerekir . Bunun yerine, varsayılan HTML ile işleyecek.

Bir örnek:

<%= form_for(@post, :remote => true) do |f| %> 

ya da

<%= link_to "Edit", edit_post_path(post), :remote => true %> 

, en son jQuery ve jQuery Raylar yüklü adaptörü bulunduğundan emin olun: Bir yan not olarak https://github.com/rails/jquery-ujs

, sen don' CRUD eylemleri için% 100 ajax yapıyorsanız yukarıdaki kodunuzda format.html'a gereksiniminiz var, çünkü daha önce edebileceğiniz tüm JS dosyaları (format.js).

---

Güncelleme: Sana bir şeyler yanlış anlama olduğunu düşünüyorum ... Eğer CRUD (create, read, güncelleme, silme)% 100 ajax çağrıları içine eylemler değiştirme konusunda sadece görüşmelere okuduğunuz öğretici hangi .js.erb dosyalarının oluşturulmasına yanıt verebilecek tek kişi oldukları anlamına gelir. Bu nedenle, sayfanın Processing SomeController#some_action as JS olduğunu kontrol ettiğinizde yalnızca, Müşteriler denetleyicinizdeki, show, update ve destroy eylemlerine uygulanır. varsa

dosya rails.js kurtulmak için emin olun ve bunun yerine yeni jquery_ujs kullanın: jQuery ve jQuery-UJS Raylar 3.0 yüklemek için

, bu yönergeleri izleyin. Genel dizine kopyalanan js dosyası. İstenirse jquery_ujs.js dosyasının üzerine yazmayı seçin.

Sonra rails generate jquery:install

bu şekilde düzen şablonunu değiştirme

çalıştırın:

Söylemek zorunda

<%= stylesheet_link_tag :all %> 
<%= javascript_include_tag :defaults %> 
<%= csrf_meta_tag %> 

, okumakta olduğu öğretici şimdiye kadar okuduğum en kötü öğretici hakkındadır. Eğer Ruby on Rails için çok yeni görünmektedir bu yüzden ben tavsiye ederim farklı bir öğretici okuma tavsiye ederim (bu hala AJAX w/Rails hakkında okumak isterseniz bu gibi: http://net.tutsplus.com/tutorials/javascript-ajax/using-unobtrusive-javascript-and-ajax-with-rails-3/ veya Rails öğrenmek için bu gerçekten iyi bir şey kendisi daha iyi: http://ruby.railstutorial.org/ruby-on-rails-tutorial-book).