Im Bereich Webprogrammierung ist zur Zeit das JavaScript Umfeld sehr interessant und gewinnt mehr und mehr an Fahrt. Nach den DOM Libraries wie JQuery und Prototype entstehen nun JavaScript MVC Frameworks wie
Backbone und Sproutcore, die das DOM wegabstrahieren und es ermöglichen auch in JavaScript im gewohnten MVC Paradigma zu
programmieren.
Da es ab Sproutcore 2.0 möglich ist, Sproutcore Views als Schnipsel in HTML einzubetten habe ich mir angesehen, was nötig ist um Sproutcore in eine Rails 3.1 Anwendung zu integrieren.
Als Basis habe ich den Tutorial Code für eine Todo Anwendung genommen.

Compass und SASS

Damit das richtige CSS generiert wird fügt muß das compass Gem hinzugefügt werden. Bisher ist dafür noch eine spezielle Version für Rails 3.1 nötig.

gem 'compass', :git => 'https://github.com/chriseppstein/compass.git',:branch => 'rails31'

Nun bindet man noch ein sass-rails Gem ein:

gem 'sass-rails', :git => 'https://github.com/rails/sass-rails.git'

Update: Inzwischen ist es nicht mehr nötig die Git repositories anzugeben. Ein “gem ‘compass’” und “gem ‘sass’” reichen aus.

Die Compass Stylesheets müssen noch dem Sass Ladepfad hinzuzufügt werden.
Für sass-rails macht man dies in config/application.rb:

config.sass.load_paths ||= []
config.sass.load_paths << "#{Gem.loaded_specs['compass'].full_gem_path}/frameworks/compass/stylesheets"

Im Rails Wurzelverzeichnis gibt man nun:

compass init rails .

ein, was die Datei config/compass.rb erzeugt.

Sproutcore.js einbinden

Für Sproutcore gibt es das Gem sproutcore-rails, das ähnlich wie jquery-rails, Sproutcore.js in einem Gem zur Verfügung stellt.
Es wird dann nur ein

//= require sproutcore

in app/assets/javascripts/application.js benötigt.
Möchte man den Javascript Code jedoch noch testen sollte man sich sproutcore.js seperat in das assets/javascripts Verzeichnis kopieren.
Nun ist Sproutcore in die Rails Anwendung integriert und man kann beginnen Sproutcore zu verwenden.

Jasmine

Zum Testen der Sproutcore Anwendung habe ich Jasmine verwendet, das in der Railscasts Folge 261 vorgestellt wurde. Damit Jasmine mit Rails 3.1 funktioniert, müssen lediglich die JavaScript-Dateien in spec/javascripts/support/jasmine.yml angegeben werden.

src_files:
- app/assets/javascripts/sproutcore-2.0.a.3.js
- app/assets/javascripts/todos.js

Nun kann man mit den Tests beginnen:

describe("Todos", function() {
  it("should add a todo element", function(){
    var todosController=Todos.todosController;
    todosController.createTodo("new Todo");
    expect(todosController.content.objectAt(0).title).toEqual("new Todo");
  });
});