Discussion :

[xhion]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[xhion]

Après plusieurs essayes ce matin, toujours pas de solution trouvée

[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.

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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