使用requireJS，backboneJS，和underscoreJS完成自定义模板封装

最新推荐文章于 2023-03-01 11:06:00 发布

ACDET

最新推荐文章于 2023-03-01 11:06:00 发布

阅读量1.7k

点赞数

分类专栏：移动互联网 appcan 文章标签： appcan reqireJS backbone underscore

本文链接：https://blog.csdn.net/WatermelonZero/article/details/49002339

版权

appcan 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

移动互联网

3 篇文章 0 订阅

订阅专栏

使用requireJS，backboneJS，和underscoreJS完成自定义模板封装

原来的代码

当我们进行一个列表的数据填充的时候，是这样做的：

    //获取美食列表
    function getFoodList(typeId) {

        appcan.request.ajax({
            url : 'http://testmas.appcan.cn:9000/ODBC/shopList?pageNum=1&count=5&typeId=' + typeId,
            type : 'GET',
            data : {
            },
            offline : true,
            offlineDataPath : 'wgt://aaa/',
            success : function(data) {
                //alert(data);
                data = JSON.parse(data);
                var str = '';
                if (data.status == '0') {
                    //循环展示数据
                    for (var i = 0; i < data.data.length; i++) {
                        str += '<div class="ub ub-f1 margin-1" onclick="openDetail(\'' + data.data[i].id + '\')">'
                        // +         '<div class="ub ub-f1">'
                        +'<img src="' + data.data[i].top + '" class="ub ub-img" style="height:5em;width:5em" />'
                        // +         '</div>'
                        +'<div class="ub ub-f1 ub-ver mar-l-2">' + '<div class="font-1 clamp1">' + data.data[i].title + '</div>' + '<div class="ub font-2 clamp2 margint-1">' + data.data[i].summary + '</div>' + '<div class="ub font-3 umar-t ub-f1">' + '<div class="ub">' + '美食' + '</div>' + '<div class="ub ub-f1 ub-pe">' + data.data[i].distance + '</div>' + '</div>' + '</div>' + '</div>' + '<div class="ub bor-b marlr"></div>'
                    }
                    $('#listview').append(str);
                }
            }
        });
    }

好吧，你可能什么也没有看懂，那么让我来告诉你哪里有问题：在for循环里面有很多拼接的HTML代码段，看起来很麻烦而且当你打那些单引号和双引号的时候有没有想砸键盘的冲动。那么好，让我来看一看另外一种方式。

另外一种方式

废话少说，先上代码：

//首先我们先在一个frame里面拼一个模板<AppCan的frame的概念不懂的可以去看我的博客，下面有传送门
<script id="tpl_list" type="text/template">//注意type的类型
        <h1>模版列表特殊化</h1>
        <ul id="my_ul">
            <%if(list&&list.length){%>
                <%for(var i = 0; i < list.length; i++) {
                    var def_bottom='bottom';
                        if(i==list.length-1){
                            def_bottom='';
                        }
                        %>
                        <li data-num="<%=list[i].name%>" class="<%=def_bottom%>">第<%=i+1%>:<%=list[i].name%></li>
                <%}%>
        <%}else{%>
                <!-- 无数据 -->
                <li>无数据</li>
        <%}%>
       </ul>

    </script>

http://blog.csdn.net/watermelonzero/article/details/45489213
之后，我们还要写一个js文件，或者你直接写在frame里面。

var callback_data = {//这个地方模拟了ajax的success回调方法。
            state : 200,
            list : [{
                name : "appcan"
            }, {
                name : "3g2win"
            }, {
                name : "hahaha"
            }]
        };
        var demo = appcan.require('demo');
        var html = demo.templeList($('#tpl_list').html(), callback_data);
        $('#list_demo').html(html);

最后我们还要在body标签里面写一个div来接受他们就好了，

<div id="list_demo"></div>

好吧，最后还是把最后的HTML代码和JS代码给你们吧<谁让我是一个伟大的无私的程序员呢>。

index_content.html

<!DOCTYPE html>
<html class="um landscape min-width-240px min-width-320px min-width-480px min-width-768px min-width-1024px">
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <link rel="stylesheet" href="css/fonts/font-awesome.min.css">
    <link rel="stylesheet" href="css/ui-box.css">
    <link rel="stylesheet" href="css/ui-base.css">
    <link rel="stylesheet" href="css/ui-color.css">
    <link rel="stylesheet" href="css/appcan.icon.css">
    <link rel="stylesheet" href="css/appcan.control.css">
</head>
<body class="um-vp bc-bg" ontouchstart>
    <script id="tpl_list" type="text/template">
        <h1>模版列表特殊化</h1>
        <ul id="my_ul">
        <%if(list&&list.length){%>
        <%for(var i = 0; i < list.length; i++) {
        var def_bottom='bottom';
        if(i==list.length-1){
        <!-- 最后一个元素没有下边框 -->
        def_bottom='';
        }
        %>
        <li data-num="<%=list[i].name%>" class="<%=def_bottom%>">第<%=i+1%>:<%=list[i].name%></li>
        <%}%>
        <%}else{%>
        <!-- 无数据 -->
        <li>无数据</li>
        <%}%>
        </ul>

    </script>

    <div id="list_demo"></div>

    <script src="js/appcan.js"></script>
    <script src="js/appcan.control.js"></script>
    <script src="js/model.demo.js"></script>//别忘了引入model.demo.js
</body>
<script>
    appcan.ready(function() {
        appcan.initBounce();

        var callback_data = {
            state : 200,
            list : [{
                name : "appcan"
            }, {
                name : "3g2win"
            }, {
                name : "hahaha"
            }]
        };
        var demo = appcan.require('demo');
        var html = demo.templeList($('#tpl_list').html(), callback_data);
        $('#list_demo').html(html);

    })

</script>
</html>

model.demo.js

appcan.define('demo', function($, exports, modules) {
var demo = {
    templeList : function(tpl_html, data) {//tpl.html是index_content.html中模板的id，data是回调返回的数据
        var _ = appcan.require('underscore');
        // var html=_.template(tpl_html,data);
        var tmp = _.template(tpl_html);
        var html = tmp(data);
        return html;
    }
}
    modules.exports = demo;
});

如果做的没有错的话，那么你们应该可以看到效果了。下面我们来说一说具体是怎样实现的。<由于涉及到requireJS，backboneJS，和underscoreJS，所以，下面的这些东西还是以AppCan文档中的Base类库部分主。http://newdocx.appcan.cn/newdocx/docx?type=1256_1254>

其实也没有用多少难的知识，就用到的一个appcan.define的方法。

//定义一个foo模块
appcan.define('foo',function($,exports,modules){
//do something
modules.exports = {foo:'foo'};
});

//或者可以这样

appcan.define('Obj',function($,exports,modules){
//do something
    var Obj={
        //这里面可以写一些方法。
    };
    modules.exports = Obj;
});

这样子的话就定义好了，下面我们只需要在index_content.html里面拼装模板就可以了。

<script id="tpl_list" type="text/template">
        <h1>模版列表特殊化</h1>
        <ul id="my_ul">
        <%if(list&&list.length){%>
        <%for(var i = 0; i < list.length; i++) {
        var def_bottom='bottom';
        if(i==list.length-1){
        <!-- 最后一个元素没有下边框 -->
        def_bottom='';
        }
        %>
        <li data-num="<%=list[i].name%>" class="<%=def_bottom%>">第<%=i+1%>:<%=list[i].name%></li>
        <%}%>
        <%}else{%>
        <!-- 无数据 -->
        <li>无数据</li>
        <%}%>
        </ul>
    </script>

好吧，你看过之后发现一头雾水，但是没关系，我告诉你只要是HTML的代码你都不用加上<%和%>的符号(注意这一个是成对出现的)。

现在是模块定义好了，显示格式定义好了，下面就是数据了，我们现在的数据是假的数据，模仿的Ajax的success的回调方法。

var callback_data = {
            state : 200,
            list : [{
                name : "appcan"
            }, {
                name : "3g2win"
            }, {
                name : "hahaha"
            }]
        };
        var demo = appcan.require('demo'); //请求定义好的demo模块，之后返回请求的对象
        var html = demo.templeList($('#tpl_list').html(), callback_data);//调用demo模块的templeList，请求到定义的模板名称，并且把数据带进去就可以了、
        $('#list_demo').html(html);//把数据填充到网页的相应的位置。

OK，Everything is done。有问题请在微信群或者留言，每天晚上会准时回复。

最最原始的知识点就是三个JS：requireJS，backboneJS，和underscoreJS。期相关知识点会在以后的博文中说明，大家敬请期待。

ACDET

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用requireJS，backboneJS，和underscoreJS完成自定义模板封装

使用requireJS，backboneJS，和underscoreJS完成自定义模板封装原来的代码当我们进行一个列表的数据填充的时候，是这样做的： //获取美食列表 function getFoodList(typeId) { appcan.request.ajax({ url : 'http://testmas.appcan.cn:9000/O
复制链接

扫一扫