SproutCore: Créer une liste

Nous allons voir comment créer un modèle d'objet, un contrôleur et afficher les objets dans une liste.

Pour commencer :
1) Créer un projet (dans le terminal) :

$ sc-init test_list
$ cd test_list

2) création du modèle et du contrôleur:

$ sc-gen model test_list/ligne
$ sc-gen controller test_list/ligneController SC.ArrayController

3) Ouvrez : clients/test_list/english.lproj/body.rhtml et coller :

<% scroll_view :record_list_scroll_view,
:height => 200 do %>
<%= list_view :record_list, :content_value_key => :title,
:content_value_editable => true,
:can_reorder_content => true,
:can_delete_content => true,
:bind => {
:content => "TestList.ligneController.arrangedObjects",
:selection => "TestList.ligneController.selection"
} %>

<% end %>

4) Ouvrez ensuite :

clients/test_list/fixtures/ligne.js

Coller ceci en dessou de la ligne "TestList.FIXTURES = TestList.FIXTURES.concat([" :

{ guid: 1,
type:'Ligne',
title: 'ligne1'
},
{ guid: 2,
type:'Ligne',
title: 'ligne2'
},
{ guid: 3,
type:'Ligne',
title: 'ligne3'
},
{ guid: 4,
type:'Ligne',
title: 'ligne4'
}

5) Ouvrez :

clients/test_list/main.js

Coller ceci sous le commentaire "// Step 3. Set the content..." :

var lines = TestList.Ligne.findAll().clone() ;
TestList.ligneController.set('content',lines);

6) dans la console lancer le serveur de test :

$ sc-server

7) aller dans votre navigateur à l'adresse suivante : http://localhost:4020/test_list/
Vous devez obtenir quelque chose de similaire à ceci :
Pas mal pour un travail de 3 minutes ?


Je me suis basé sur cette page pour la réalisation de ce tutoriel. Vous pouvez me faire part de vos retour d'expérience dans les commentaires de cet article !