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中