A visualização Backbone.JS é renderizada, mas não exibida na página

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

Pergunta

Estou trabalhando na conversão de um aplicativo de página única em backbone.JS.A View abaixo usa a tag body como tagName - ou seja, quero que a view ocupe todo o conteúdo da página.Não quero usar divs de contêiner ou outros 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

Ao renderizar, vejo 

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

Mas depois de inspecionar o DOM, o corpo não contém mais o texto.

Foi útil?

Solução

tagName indica qual tag o Backbone deve usar para criar seu el se nenhum el for fornecido pelo construtor.O elemento criado não é inserido automaticamente no DOM.

A maneira mais simples é provavelmente criar sua visualização com seu el definido como body :

new ThingView({el:'body'})

Outras dicas

O que Nikoshr explicou está correto.Somando a isso, usar tagName está correto.mas o ideal é usar o elemento el, que é definido na biblioteca Backbone.js como um elemento (el) do View.

Abaixo está o código ideal que você deve usar ao fazer isso. 

<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>
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top