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
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)
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
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
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>');