Screencast: Daten an JavaScript übergeben

Fast jeder hatte bereits die Anforderung Daten zwischen einer Rails-Applikation im Backend mit Java-Script im Frontend auszutauschen. Sei es auch nur um bestimmte Teile der Seite mit Java-Script zu markieren (z.B. Highlighting von Navigation oder Suchbegriffen). Es gibt verschiedenste Ansätze und alle bringen ihre eigenen Vor- und Nachteile mit. In diesem Screencast zeigt Ryan Drei verschiedene Ansätze wie es auch implementiert werden kann.

 

Downloads in verschiedenen Formaten:

mp4
m4v
webm
ogg

 

Resourcen:

products/index.html.erb

[html]
<%= javascript_tag do %>
window.productsURL = "<%=j products_url %>";
window.products = <%=raw Product.limit(10).to_json %>;
<% end %>
[/html]

app/assets/javascripts/products.js.coffee

[javascript]
jQuery ->
alert productsURL
[/javascript]

products/index.html.erb

[html]
<%= content_tag "div", id: "products", data: {products: Product.limit(10)} do %>
Loading products…
<% end %>
[/html]

app/assets/javascripts/products.js.coffee

[javascript]
jQuery ->
alert $(‚#products‘).data(‚products‘)
[/javascript]

Gemfile

[ruby]
gem ‚gon‘
[/ruby]

layouts/application.html.erb

[html]
<%= include_gon %>
[/html]

products_controller.rb

[ruby]
def index
gon.products = Product.limit(10)
# or
gon.rabl "app/views/products/index.json.rabl", as: "products"
end
[/ruby]

products/index.json.rabl

[javascript]
collection Product.limit(10)

attributes :id, :name, :price
[/javascript]

app/assets/javascripts/products.js.coffee

[javascript]
alert gon.products if gon
[/javascript]

Screencast: JavaScript mit Jasmine testen

Jasmine ist ein BDD-Testframework um JavaScript zu testen. Es ist für die Tests nicht auf DOM angewiesen und hat auch keine Abhängigkeiten zu anderen Frameworks. Ryan zeigt wie es in Kombination mit Rails eingesetzt werden kann.

 

Download:

Download(24.8 MB, 15:20)
Alternativer Download für iPod & Apple TV(25.3 MB, 15:20)

 

Resourcen:

 

Quellcode:

[bash]
bundle
rails g jasmine:install
rake jasmine
rake jasmine:ci
curl http://cloud.github.com/downloads/velesin/jasmine-jquery/jasmine-jquery-1.2.0.js > spec/javascripts/helpers/jasmine_jquery-1.2.0.js
[/bash]

[ruby]
# Gemfile
gem ‚jasmine‘, :group => [:development, :test]
[/ruby]

[javascript]
/* credit_card_spec.js */

describe("CreditCard", function() {
it("cleans number by removing spaces and dashes", function() {
expect(CreditCard.cleanNumber("123 4-5")).toEqual("12345");
});

it("validates based on mod 10", function() {
expect(CreditCard.validNumber("4111 1111-11111111")).toBeTruthy();
expect(CreditCard.validNumber("4111111111111121")).toBeFalsy();
});

it("validates when text field loses focus", function() {
loadFixtures("order_form.html");
$("#card_number").validateCreditCardNumber();
$("#card_number").val("123");
$("#card_number").blur();
expect($("#card_number_error")).toHaveText("Invalid credit card number.");
$("#card_number").val("4111 1111-11111111");
$("#card_number").blur();
expect($("#card_number_error")).toHaveText("");
});
});

/* credit_card.js */
var CreditCard = {
cleanNumber: function(number) {
return number.replace(/[- ]/g, "");
},

validNumber: function(number) {
var total = 0;
number = this.cleanNumber(number);
for (var i=number.length-1; i >= 0; i–) {
var n = parseInt(number[i]);
if ((i+number.length) % 2 == 0) {
n = n*2 > 9 ? n*2 – 9 : n*2;
}
total += n;
};
return total % 10 == 0;
}
};

(function($){
$.fn.validateCreditCardNumber = function() {
return this.each(function() {
$(this).blur(function() {
if (!CreditCard.validNumber(this.value)) {
$("#" + this.id + "_error").text("Invalid credit card number.");
} else {
$("#" + this.id + "_error").text("");
}
});
});
};
})(jQuery);

/* applicaiton.js */
$(function() {
$("#order_credit_card_number").validateCreditCardNumber();
});
[/javascript]

[html]
<!– orders/_form.html.erb –>
<%= f.text_field :credit_card_number %>
<span id="order_credit_card_number_error"></span>
[/html]

JavaScript KnowHow Freshup

Prototype, JQuery, Dojo…. und viele andere Frameworks basieren auf JavaScript und sollen dem Entwickler die Arbeit vereinfachen bzw. bei der Arbeit unterstützen. Trotzdem sollte jeder Web-Entwickler sich ausreichend mit JavaScript auskennen um ggf. Anpassungen vornehmen zu können oder sogar die verwendeten Frameworks zu erweitern.

Auf den Seiten von fallenrouge (http://fallenrogue.com/) könnt ihr JavaScript schrittweise erlernen oder euer JS-Wissen auffrischen. Es sind insgesamt fünf Artikel erschienen und teilweise mit Screencasts bespickt. Neben der Sprache selber werden auch nützliche Tools wie z.B. Firebug erwähnt.

Prototype and script.aculo.us. You Never Knew JavaScript Could Do This! (Pragmatic Programmers)

Web applications are getting richer and richer, with more interaction baked in every day. But JavaScript, DOM, CSS and a full host of other Web standards are quite complex, and the result isn’t always browser compliant. The Prototype and script.aculo.us libraries are veritable treasure troves, smoothing over all the usual nitty-gritty differences between browsers, and making most common features a breeze to implement.

With this book, you can quickly wield the whole power of these extraordinary libraries. You can dive into Prototype, the library that makes JavaScript so much more powerful, and it looks a lot like Ruby code.Exploring the DOM, handling events, taming AJAX, and radically simplifying most of your scripting code: it all becomes easy – and very portable – with Prototype. When it comes to advanced UI features, script.aculo.us is every web developer’s dream come true: whether you need to create auto-completed text inputs, implement in-place editors, provide customized drag-and-drop behaviors, capture your users‘ attention with visual effects or simply build DOM fragments more efficiently, it’s all there, and lightweight too.

This book guides you through all the details of these features, letting you use many technologies on the server side, such as PHP, vanilla Ruby, and Ruby On Rails, in countless examples illustrating every aspect. Power users will also learn the design philosophies of the libraries, and how to contribute to them and augment them for their own needs.

  • Taschenbuch: 436 Seiten
  • Verlag: (2008-01-25 )
  • Preis: 18.44 €
  • Sprache: english
  • ISBN-10: 1934356018
  • Autor(en): Christophe Porteneuve
  • kaufen