理解骨干中的el

时间:2014-03-20 14:32:42

标签: backbone.js

我不太明白el是如何在骨干中工作的。

我假设当没有指定时,el违反了身体。我创造了一个小提琴来说明我的误解。

当我指定el时一切正常。未指定但不返回任何内容。

http://jsfiddle.net/9R9zU/70/

HTML:

<div class="foo">
    <p>Foo</p>
</div>

<div class="bar">
</div>

<script id="indexTemplate" type="text/template">
  Bar?
</script>

JS:

app = {};

app.Router = Backbone.Router.extend({
    routes: {
        ""           : "index"
    },

    index: function() {
        if (!this.indexView) {
            this.indexView = new app.IndexView();
            this.indexView.render();
        } else {
            this.indexView.refresh();
        }
    }
});

app.IndexView = Backbone.View.extend({

//  el: $('.bar'),

    template : _.template( $('#indexTemplate').html() ),

    render: function() {
        this.$el.html(this.template());
        return this;
    },

    refresh: function() {
        console.log('we\'ve already been here hombre.')
    }

});


var router = new app.Router();

Backbone.history.start();

1 个答案:

答案 0 :(得分:3)

如果未在Backbone视图中指定元素,它将在内存中创建一个html节点,将视图呈现在其中并基于该节点绑定所有事件处理程序。然后你需要手动将它附加到dom,如下所示:

$('body').append(this.indexView.render().el);