标签归档:clone

使用jQuery的clone+模板的形式动态生成页面

公司的官网改造,其中有些地方要获取服务器返回的json数据,并动态生成列表。

原来的代码是用字符串的形式拼接html标签内容来动态生成的。这样虽然是没什么问题,但是我觉得代码看起来不够整齐,并且后面为何还得在一串String中找到要修改的地方,实在够难受。所以想着能不能在html先写好一个模板,然后在js中复制这个模板,然后修改需要变动的地方后,再嵌入到页面中呢?

有了这个想法,就到网上各种搜,后来发现使用jQuery选择出来的元素对象,有个clone方法,刚好适用。有了可行性后就着手开始尝试了。

1、添加模板

<div id=”news_list”></div>
<div id=”news_templete” style=”display:none;”>
<div class=”divider”></div>
<div class=”media”>
<div class=”blink-dot-top”></div>
<div class=”blink-dot-bottom”></div>
<div class=”blink-dot-right”></div>
<div class=”blink-dot-left”></div>
<div class=”media-left”>
<!– <a href=”#”> –>
<img class=”news_thumd_img media-object” src=”” alt=”…”>
<!– </a> –>
</div>
<div class=”media-body”>
<h4 class=”media-heading”><a class=”news_title_link” href=”#” data-toggle=”modal” data-target=”.bs-example-modal-lg”></a></h4>
<h4 class=”news_time media-heading”>
<small>2015/05/15</small>
</h4>
<div class=”news_body”>
</div>

</div>
</div>
</div>

例如这里的一个id=”news_templete”的div包裹的元素,就可以作为一个模板,用于在页面展示一条新闻。

2、使用js动态复制模板

for(var i = 0 ; i < newsJson.length; i++){

var newTitle = newsJson[i].title;
var newContent = newsJson[i].content;
var newPicUrl=newsJson[i].picUrl;
if(null==newPicUrl||””==newPicUrl){
newPicUrl=”images/123.JPG”;
}
newsListContent.push(newContent);//储存起来,点展开时显示内容
var newContentFormatted = formatContent(newContent);
if(newContent.length>150){
newContentFormatted+=’…’;
}
var newTime=””;
if(newsJson[i].time != null){
newTime = dateTotime(newsJson[i].time);
}else{
newTime = “”;
}
var new_temp_div=$(“#news_templete”);
var newDiv = new_temp_div.clone(true);
newDiv.removeAttr(“id”);
newDiv.find(“.news_thumd_img”).attr(“src”,newPicUrl);
newDiv.find(“.news_title_link”).attr(“onclick”,”javascript:showNewsDetail(“+i+”);”);
newDiv.find(“.news_title_link”).html(newTitle);
newDiv.find(“.news_time”).html(“<small>”+newTime+”<small>”);
newDiv.find(“.news_body”).html(newContentFormatted);
newDiv.show();//取消从模板中带过来的“隐藏”设置
$(“#news_list”).append(newDiv);
}

根据服务器返回的json对象列表,循环生成需要展示新闻列表。

蓝色字体部分,就是使用clone方法复制news_templete模板后,将json的数据填充到这个新div中。这个newDiv就是一条新闻,最后使用append的方式添加到页面中($(“#news_list”).append(newDiv);,其中$(“#news_list”)即为你想要这些内容出现的地方,如第一点中的蓝字html标签)。

这样代码看起来就整齐多了,后面修改也比较容易。如果只是需要修改页面布局,则只需要修改页面中的模板即可。

后来发现公司有用一个react.js这套界面构造框架,用来动态构建界面,感觉还是比较方便。嗯,它是Facebook推出的。

reactjs官网