La vue Backbone.JS est rendue, mais n'est pas affichée sur la page

StackOverflow https://stackoverflow.com//questions/9634508

Question

Je travaille sur la conversion d'une application d'une seule page en backbone.JS.La vue ci-dessous utilise la balise body comme tagName - c'est-à-dire que je veux que la vue occupe tout le contenu de la page.Je ne veux pas utiliser de divs de conteneurs ou d'autres hacks. 

var ThingView = Backbone.View.extend({  
    tagName : "body",
            ... 


    // Show the HTML for the view 
    render : function() {  
        console.log('Displaying thing')
        $(this.el).append('<h1>test</h1>');
        console.log('finished')
        console.log($(this.el))
        return this; // For chaining

Lors du rendu, je vois 

finished
[
<body>​
    <h1>​test​</h1>​
</body>​
]

Mais après avoir inspecté le DOM, le corps n'a plus le texte.

Était-ce utile?

La solution

tagName indique quelle balise Backbone doit utiliser pour créer son el si aucun el n'est fourni par le constructeur.L'élément créé n'est pas automatiquement inséré dans le DOM.

Le moyen le plus simple est probablement de créer votre vue avec son élément défini sur body :

new ThingView({el:'body'})

Autres conseils

Qu'est-ce que Nikoshr a expliqué est correct.Ajoutez-y, l'utilisation de TAGName est correcte.Mais idéalement, vous devez utiliser El Element, qui est défini dans la bibliothèque Backbone.js en tant qu'élément de vision (EL).

ci-dessous est le code idéal que vous devriez utiliser tout en faisant cela. 

<script type="text/javascript">
            $(document).ready(function(){  
             var ThingView  = Backbone.View.extend({
                    el:$("body"),                   
                    initialize: function(){
                            _.bindAll(this,"render");
                            this.render();  
                    },
                    render:function(){
                        this.el.append('<h1>test</h1>');    
                        console.log('finished');
                        console.log($(this.el).html());                     
                    }
                });    
                var ThingView = new ThingView();
            });
</script>

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top