![Devolviendo Javascript
con Rails
En nuestro controlador:
def create
@task = Task.new(params[:task])
respond_to do |format|
if @task.save
format.html { redirect_to @task, notice: 'Task was successfully created.' }
format.js # Por defecto buscará create.js.erb
else
format.html { render action: "new" }
format.js # Por defecto buscará create.js.erb
end
end
end
Vista
$('ul[data-category_id='+<%= @task.category_id %>+']').append('<li><%= escape_javascript
render("header_task", :task => @task) %></li>');](https://image.slidesharecdn.com/talkstallerrails2aparte-120228043146-phpapp01/85/Taller-de-Introduccion-a-Ruby-on-Rails-2-parte-27-320.jpg)
Taller de Introducción a Ruby on Rails (2ª parte)
- 1. 2ª Parte Javier Cuevas - Diacode.com
- 2. Menú del día • Repaso a generadores y aclaraciones sobre Scaffolding • AJAX con Rails • Autentificación de usuarios con Devise • Resolución del ejercicio propuesto
- 3. Repaso a generadores y aclaraciones sobre Scaffolding
- 4. Para tener un CRUD de un modelo necesitamos: • Modelo • Controlador • Vistas • Tabla en la base de datos (migración) • Rutas configuradas (routes.rb)
- 5. Para tener un CRUD de un modelo necesitamos: • Modelo Todo esto nos lo ofrece • Controlador el scaffold • Vistas • Tabla en la base de datos (migración) • Rutas configuradas (routes.rb)
- 6. El Scaffold además... rails g scaffold Task invoke active_record create db/migrate/20120224135839_create_tasks.rb name:string create app/models/task.rb description:text invoke test_unit priority:integer create test/unit/task_test.rb create test/fixtures/tasks.yml due_to:date route resources :tasks done:boolean invoke scaffold_controller create app/controllers/tasks_controller.rb category:references invoke erb create app/views/tasks create app/views/tasks/index.html.erb create app/views/tasks/edit.html.erb create app/views/tasks/show.html.erb create app/views/tasks/new.html.erb create app/views/tasks/_form.html.erb invoke test_unit create test/functional/tasks_controller_test.rb invoke helper create app/helpers/tasks_helper.rb invoke test_unit create test/unit/helpers/tasks_helper_test.rb invoke assets invoke coffee create app/assets/javascripts/tasks.js.coffee invoke scss create app/assets/stylesheets/tasks.css.scss invoke scss create app/assets/stylesheets/scaffolds.css.scss
- 7. El Scaffold además... rails g scaffold Task invoke active_record create db/migrate/20120224135839_create_tasks.rb name:string create app/models/task.rb description:text invoke test_unit priority:integer create test/unit/task_test.rb create test/fixtures/tasks.yml due_to:date route resources :tasks done:boolean invoke scaffold_controller create app/controllers/tasks_controller.rb category:references invoke erb create app/views/tasks create app/views/tasks/index.html.erb Genera create create create app/views/tasks/edit.html.erb app/views/tasks/show.html.erb app/views/tasks/new.html.erb CSS (SCSS), create invoke create app/views/tasks/_form.html.erb test_unit test/functional/tasks_controller_test.rb Javascript invoke create invoke helper app/helpers/tasks_helper.rb test_unit (Coffee), create invoke invoke assets test/unit/helpers/tasks_helper_test.rb coffee Helpers, y create invoke create app/assets/javascripts/tasks.js.coffee scss app/assets/stylesheets/tasks.css.scss Tests invoke create scss app/assets/stylesheets/scaffolds.css.scss
- 8. El Scaffold NO hace... • No incluye selects para relacionar modelos en los formularios que crea. • Si hiciste scaffold, y posteriormente incluyes un campo nuevo a la tabla de tu modelo, las vistas no se actualizan solas: tendrás que actualizarlas tú. • Si añades nuevas acciones a tu controlador, tendrás que incluirlas en el routes.rb. El scaffold solo define rutas para el CRUD.
- 9. Montando un CRUD SIN Scaffold • Modelo y Tabla (migración) rails g model User name:string rake db:migrate • Modelo sin Tabla (migración) rails g model User name:string --migrations false • Controlador rails g controller User tip: rails g controller --help • Tendremos que añadir las acciones CRUD (index, show, edit, create, update, destroy) al controlador a mano • Las vistas las creamos a mano desde nuestro editor • Tendremos que editar el routes.rb y añadir rutas CRUD (resources :users) o rutas propias
- 10. AJAX con Rails
- 11. Algunas notas sobre Rails y Javascript • Rails es Javascript framework agnostic, es decir, que puede integrarse tanto con jQuery como con Prototype, etc. • Para integrar Rails con cada framework se usan “adaptadores”. • Por defecto Rails añade al Gemfile el adaptador jquery-rails. Es decir: sin hacer nada, podemos empezar a usar jQuery.
- 12. Generar petición AJAX con Rails <%= link_to 'Destroy', task, confirm: 'Are you sure?', method: :delete, :remote => true %> <%= form_for(@task, :remote => true) do |f| %>
- 13. Generar petición AJAX con Rails <%= link_to 'Destroy', task, confirm: 'Are you sure?', method: :delete, :remote => true %> <%= form_for(@task, :remote => true) do |f| %> Por defecto estas peticiones esperan recibir código Javascript
- 14. ¿Qué debe devolver la petición AJAX? • Una petición AJAX puede devolver diferentes tipos de datos: • Código Javascript • JSON • JSONP (llamada a función JS + datos JSON) • Texto • HTML
- 15. ¿Qué debe devolver la petición AJAX? • Una petición AJAX puede devolver diferentes tipos de datos: • Código Javascript Normalmente usaremos • JSON estos dos • JSONP (llamada a función JS + datos JSON) • Texto • HTML
- 17. Javascript VS JSON • Devolver Javascript
- 18. Javascript VS JSON • Devolver Javascript • A cada petición AJAXbloque de contestamos con un código Javascript, resultante de interpretar un archivo .js.erb
- 19. Javascript VS JSON • Devolver Javascript • A cada petición AJAXbloque de contestamos con un código Javascript, resultante de interpretar un archivo .js.erb • Los archivos .js.erb mezclan JS y Ruby.
- 20. Javascript VS JSON • Devolver Javascript • A cada petición AJAXbloque de contestamos con un código Javascript, resultante de interpretar un archivo .js.erb • Los archivos .js.erb mezclan JS y Ruby. • Se almacenan en la carpeta app/views
- 21. Javascript VS JSON • Devolver Javascript • A cada petición AJAXbloque de contestamos con un código Javascript, resultante de interpretar un archivo .js.erb • Los archivos .js.erb mezclan JS y Ruby. • Se almacenan en la carpeta app/views • Insertandorenderizar vistas, podemos: código ERB: usar helpers, iterar con Ruby, etc.
- 22. Javascript VS JSON • Devolver Javascript • A cada petición AJAXbloque de contestamos con un código Javascript, resultante de interpretar un archivo .js.erb • Los archivos .js.erb mezclan JS y Ruby. • Se almacenan en la carpeta app/views • Insertandorenderizar vistas, podemos: código ERB: usar helpers, iterar con Ruby, etc. • Tardan un poco más en ser ejecutados por el navegador.
- 23. Javascript VS JSON • Devolver Javascript • Devolver JSON • A cada petición AJAXbloque de contestamos con un código Javascript, resultante de interpretar un archivo .js.erb • Los archivos .js.erb mezclan JS y Ruby. • Se almacenan en la carpeta app/views • Insertandorenderizar vistas, podemos: código ERB: usar helpers, iterar con Ruby, etc. • Tardan un poco más en ser ejecutados por el navegador.
- 24. Javascript VS JSON • Devolver Javascript • Devolver JSON • A cada petición AJAXbloque de contestamos con un • En un archivo .js normal, con jQuery escucharemos los código Javascript, resultante de eventos Ajax (success, error, interpretar un archivo .js.erb etc). • Los archivos .js.erb mezclan JS y Ruby. • Se almacenan en la carpeta app/views • Insertandorenderizar vistas, podemos: código ERB: usar helpers, iterar con Ruby, etc. • Tardan un poco más en ser ejecutados por el navegador.
- 25. Javascript VS JSON • Devolver Javascript • Devolver JSON • A cada petición AJAXbloque de contestamos con un • En un archivo .js normal, con jQuery escucharemos los código Javascript, resultante de eventos Ajax (success, error, interpretar un archivo .js.erb etc). • Los archivos .js.erb mezclan JS y Ruby. • El controlador Rails codificará los datos en • Se almacenan en la carpeta app/views JSON render json: @task • Insertandorenderizar vistas, podemos: código ERB: usar helpers, iterar con Ruby, etc. • Tardan un poco más en ser ejecutados por el navegador.
- 26. Javascript VS JSON • Devolver Javascript • Devolver JSON • A cada petición AJAXbloque de contestamos con un • En un archivo .js normal, con jQuery escucharemos los código Javascript, resultante de eventos Ajax (success, error, interpretar un archivo .js.erb etc). • Los archivos .js.erb mezclan JS y Ruby. • El controlador Rails codificará los datos en • Se almacenan en la carpeta app/views JSON render json: @task • Insertandorenderizar vistas, podemos: código ERB: • La función de archivo .js callback definida en el usar helpers, iterar con Ruby, normal recibirá los datos etc. JSON y hará algo con ellos. • Tardan un poco más en ser ejecutados por el navegador.
- 27. Devolviendo Javascript con Rails En nuestro controlador: def create @task = Task.new(params[:task]) respond_to do |format| if @task.save format.html { redirect_to @task, notice: 'Task was successfully created.' } format.js # Por defecto buscará create.js.erb else format.html { render action: "new" } format.js # Por defecto buscará create.js.erb end end end Vista $('ul[data-category_id='+<%= @task.category_id %>+']').append('<li><%= escape_javascript render("header_task", :task => @task) %></li>');
- 28. Autentificación de Usuarios con Devise https://github.com/plataformatec/devise
- 30. Eso es todo :) Gracias!