Afficher des données

Version imprimable

Bonsoir,

Après avoir suivit quelques tutos sur l'utilisation de backbone, j'ai commencé a mettre en place une petite appli.

Lorsque j’exécute la suite d'instructions suivantes en mode console sous chrome le "render" de la vue fonctionne correctement et m'affiche le code attendu

Code:

1
2
3
4
5
 
RubricList = new AppCollection();
RubricList.fetch();
AppRubricListView = new AppRubricListView({ collection : RubricList });
AppRubricListView.render();

Cependant via un routeur cela ne m'affiche rien. Voici le code js que j'utilise :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
 
(function($) {
 
    // Models
    window.App = Backbone.Model.extend();
 
    window.AppCollection = Backbone.Collection.extend({
        model : App,
        url : 'app.php'
    });
 
    // Views
    window.AppRubricListView = Backbone.View.extend({
        el : $('#rub-container'),
        initialize : function() {
            this.template = _.template($('#rub-template').html());
        },
 
        render : function() {
            var renderedContent = this.template({ RubricList : this.collection.toJSON() });
            $(this.el).html(renderedContent);
            return this;
        }
    });
 
    // Router
    var AppRouter = Backbone.Router.extend({
        routes : {
            "" : "root"
        },
 
        root:function() {
            this.RubricList = new AppCollection();
            this.RubricList.fetch();
            this.AppRubricListView = new AppRubricListView({ collection : this.RubricList });
            this.AppRubricListView.render();
        }
    });
 
    var router = new AppRouter();
    Backbone.history.start();
})(jQuery);

Voici un extrait de la partie template :

Code:

1
2
3
4
5
6
7
8
 
<script type="text/template" id="rub-template">
       <% _.each(RubricList, function(App) { %>                   
                  <span class="name"><%= App.name %></span>                     
       <% }); %>
</script>
 
<div id='rub-container'></div>

Auriez-vous une petite idée svp ?

merci d'avance

08/07/2013, 12h18
xhion

Après plusieurs essayes ce matin, toujours pas de solution trouvée :cry:
09/07/2013, 18h10
ymoreau

Tu as vérifié que tu passes bien dans la fonction du routeur ? (avec un petit log informatif de debug)

Si non, peut être que la règle de routage ne fonctionne pas ?
Je ne sais pas s'il est autorisé de mettre une chaine vide en tant qu'url (doc du routeur). En tout cas les tutos ne font jamais comme ça. La route par défaut est *actions.
09/07/2013, 20h57
xhion
Bonsoir,

merci d'avoir pris le temps de répondre :)

J'ai bien tester la route via un console.log('toto') et la règle avec une chaine vide est bien valide et m'affiche toto lorsque la page se charge.

Mon problème c'est quand chargeant ma page, malgré le fait que je rentre bien dans ma route, rien ne s'affiche sur la page. (j'ai aussi testé un petit document.ready mais sans succès)

Par contre quand je lance les mêmes "fonction" dans la console, là, tout s'affiche correctement :
Code:

1 2 3 4 5 this.RubricList = new AppCollection(); this.RubricList.fetch(); this.AppRubricListView = new AppRubricListView({ collection : this.RubricList }); this.AppRubricListView.render();