Вид Backbone.JS отображается, но не отображается на странице - PullRequest
Новая
       27

Вид Backbone.JS отображается, но не отображается на странице

1 голос
/ 09 марта 2012

Я работаю над преобразованием одностраничного приложения в backbone.JS. В представлении ниже тег body используется в качестве имени тега, т. Е. Я хочу, чтобы представление занимало все содержимое страницы. Я не хочу использовать контейнерные дивы или другие хаки. 

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

При рендеринге вижу 

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

Но после того, как я осмотрю DOM, в теле больше нет текста.

Ответы [ 2 ]

7 голосов
/ 09 марта 2012

tagName указывает, какой тег Backbone должен использовать для создания своего el, если конструктор не предоставил никакого el.Созданный элемент не вставляется автоматически в DOM.

Самый простой способ, вероятно, состоит в том, чтобы создать ваше представление с установленным значением body: 

new ThingView({el:'body'})
0 голосов
/ 09 марта 2012

То, что объяснил никошр, верно.Добавление к нему, Использование tagName является правильным.но в идеале вы должны использовать элемент el, который определен в библиотеке Backbone.js как элемент (el) View.

Ниже приведен идеальный код, который вы должны использовать при этом.

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