首页 > Backbone.js开发中看到的案例疑惑?

Backbone.js开发中看到的案例疑惑?

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

生成的html


这案例写的真挫,还把 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


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中
【热门文章】
【热门文章】