您的位置：首页 > 移动开发

移动端 web 开发利用 jSmobile 进行相同结构的内容渲染

2017-05-25 00:00 309 查看

在 web 开发中经常会遇到要进行很长的列表生成操作，列表数量往往非常多，这个时候如果逐行的去书写 HTML 代码就会显得过于繁琐，并且不利于管理维护。那么，如果不采用后台渲染生成的方法，而是只从后台获取列表数据，然后通过前台渲染生成，有什么好办法呢？

适用环境：移动端 web 浏览器（经测试，此方法在 pc 端的 ie10+ / Firefox / Chrome 中也可使用）；

适用范围：相同结构，不同内容的多次渲染生成操作；

依赖资源：jSmobile ( 官网地址：http://jsmobile.applinzi.com/ )。

示例（假如页面中要生成如下列表）

方法：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

<!-- 引入 jSmobile 文件 -->
<!-- 调用 jS.view() 方法 -->
<script src="jsmobile.min.js"></script>
<script>
jS(function () {
jS.view("list", {
set: [
{ index: 1, title: "a", content: "A" },
{ index: 2, title: "aa", content: "AA" },
{ index: 3, title: "aaa", content: "AAA" },
{ index: 4, title: "aaaa", content: "AAAA" },
{ index: 5, title: "aaaaa", content: "AAAAA" },
{ index: 6, title: "aaaaaa", content: "AAAAAA" },
{ index: 7, title: "aaaaaaa", content: "AAAAAAA" },
{ index: 8, title: "aaaaaaaa", content: "AAAAAAAA" },
{ index: 9, title: "aaaaaaaaa", content: "AAAAAAAAA" }
]
});
})
</script>
</head>
<body>

<!-- 在被操作元素的父元素上添加 js-view 属性，属性值与上方的 jS.view() 的第一个参数对应 -->
<!-- 使用 {{for:???}} {{/for}} 包裹需要循环生成的元素，??? 即为 jS.view() 中包含数据的那个属性名 -->
<ul js-view="list">
{{for:set}}
<li>
<p><b>{{ index }}</b><span>{{ title }}</span><span>{{ content }}</span></p>
</li>
{{/for}}
</ul>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript jSmobile 移动端web开发前端开发 web开发

相关文章推荐

新的分享

章节导航