Screencast: Im Browser „In-Place“ Editieren

In-Place Editing bezeichnet die Möglichkeit im Browser direkt Bereiche zu bearbeiten. Diese Funktion wird gerne CMS Systemen verwendet um den Anwender eine einfache Möglichkeit zu bieten um Inhalte ohne Umwege zu verändern und/oder zu erstellen. Ryan zeigt in diesem Screencast wie dies umgesetzt werden kann.

 

Downloads in verschiedenen Formaten:

mp4
m4v
webm
ogg

 

Resourcen:

Gemfile

[ruby]
gem ‚best_in_place‘
[/ruby]

app/assets/javascripts/application.js

[javascript]
//= require jquery.purr
//= require best_in_place
[/javascript]

app/assets/javascripts/users.js.coffee

[javascript]
jQuery ->
$(‚.best_in_place‘).best_in_place()
[/javascript]

users/show.html.erb

[html]
<p>
<b>Name:</b>
<%= best_in_place @user, :name %>
</p>
<p>
<b>Email:</b>
<%= best_in_place @user, :email %>
</p>
<p>
<b>Gender:</b>
<%= best_in_place @user, :gender, type: :select, collection: [["Male", "Male"], ["Female", "Female"], ["", "Unspecified"]] %>
</p>
<p>
<b>Public profile:</b>
<%= best_in_place @user, :public_profile, type: :checkbox, collection: %w[No Yes] %>
</p>
<p>
<%= best_in_place @user, :bio, type: :textarea %>
</p>
[/html]

users_controller.rb

[ruby]
respond_to :html, :json
def update
@user = User.find(params[:id])
@user.update_attributes(params[:user])
respond_with @user
end
[/ruby]

app/assets/stylesheets/users.css.scss

[css]
.purr {
position: fixed;
top: 30px;
right: 100px;
width: 250px;
padding: 20px;
background-color: #FCC;
border: solid 2px #C66;
&:first-letter { text-transform: uppercase; }
}
[/css]