javascript - Backbone.js开发中看到的案例疑惑？

Question

render: function() {
    var e = this;
    //厉遍的方式渲染页面
    $.each(this.model.get("data"),
    function(t, n) {
        e.renderModule(n.type, n.content)
    });
}

renderModule: function(e, t) {
    var n = require("components/modules/" + e + "/view"),
    r = $('<p class="modules-' + e + '"></p>');//怎么插入的，p直接内容怎么插入有点不理解
    $(".view-inner", this.$el).append(r);
    var i = new n({
        model: t
    });
    r.html(i.$el);//这个地方不理解 主要是怎么插入的
    i.render();
}

生成的html

Answer 1

这案例写的真挫，还把 r 暴露成全局变量了。

实际上 Backbone 的每个 View 都应该实现一个 render 函数用以渲染视图。楼主对 renderModule 的疑问其实应该和 DOM 渲染有关系，并且这案例并没有完全按照 Backbone 的精神去实现。

首先，r 应该代表的是 root，即是模块的容器，这个容器在随后的源码 $(".view-inner", this.$el).append(r); 中被插入到了 .view-inner 这个元素中。

实际对 r 内容的渲染被放在了后面，r.html(i.$el); 和 i.render()。

对于这样的示例，我只能说，谁写的，过来，我帮他加个 buff

Answer 2

new View().render(data);//他将渲染html代码,没有放在dom中；
new View().render(data).$el;//只是把代码渲染在dom中；

还有事件只在dom存在时才可以绑定，如果View中出现$('img.lazy').lazyload();请修改为this.$('img.lazy').lazyload()；还有种办法

var view = new View();
view.$el;
view.render(data);
//这个时候是可以用$('img.lazy').lazyload()；因为你先渲染在dom中