web移动前端ListView运用

1、准备的html文件、template模板和json数据

①html文件(userImfor.html)

<div id="user-list" class="listview">

    <div class="scroller">

        <div class="pulldown">

            <span class="icon"></span>

            <span class="label"></span>

        </div>

<ul>

        </ul>

        <button class="loadmore btn btn-block btn-outlined">

            <div class="label">加载更多</div>

            <span class="icon"></span>

        </button>

        <div class="message">

            <div class="empty">没有数据</div>

            <div class="error">数据加载失败</div>

        </div>

</div>

</div>

②Template模板(放在html文件里)

<script id="userImfor" type="text/x-underscore-template">

<div><%=name%></div>

</script>

③json数据(放在json文件)(userImfor.json)

{

"data":{

"data":[

{"name": "张三"},

{"name": "李四"},

{"name": "王五"},

{"name": "赵六"}

]

}

}

2、把template模板添加到ul中、把数据添加到模本中(js文件中)，即Datasource 和ListView的运用。

情况一：模板中的取值的属性在json数据中有这一属性；简单说data有一个属性name 和模板template中需要得出的name值是一样的。

 

 

 

 

 

define([

        "text!myinfo/userImfor.html", 

        "common/navView",

        'shared/js/datasource',

        'listview/ListView'    

],

function(template,View,DataSource,ListView)

{

var Base = View;

return Base.extend({

id : “userImfor”,

template: template,

onShow : function(){

var me = this;

me.initData("session",true);

} ,

initData: function(storage, autoLoad){

var me = this;

me._datasource = new DataSource({

    identifier: user-list',

    storage: storage,

    url: ‘../myinfo/userImfor.json’,

    pageParam: 'pageIndex',

    requestParams: {          //与后台交付时需要传递的参数

    }

});

            var listEl = this.getElement("#user-list");  //容器的element

template = _.template(this.elementHTML(“#userImfor”)); //加载模板

this._serviceList = new ListView({

id : "listview",

el : listEl,

itemTemplate : template,

dataSource : me._datasource //在listview内部把数据添加到指定的节点中

});

}

});

});

 

情况二：模板中的取值的属性在json数据中找不到该属性时，需要我们动态的去增加json数据的属性使得模板中取值的属性在json里有

 

 

Template模板

<script id="userImfor" type="text/x-underscore-template">

<div><%=name%></div>

<div><%=age%></div>

</script>

js文件中ListView中修改为：

define([

        "text!myinfo/userImfor.html", 

        "common/navView",

        'shared/js/datasource',

        'listview/ListView' ,

"listview/ListViewItem",  

"common/osUtil",

],

function(template,View,DataSource,ListView, ListItemBase, osUtil)

{ var RankListItem = ListItemBase.extend(

        {

            initialize: function(options)

            {

                var me = this;

                ListItemBase.prototype.initialize.call(this, options);

var data = osUtil.clone(options.data); //clone一个data数据

data.age = 20   //给data数据新增一个age属性并且值为20

var e = $(options.userData.template(options.data));把新的对象数据加入模板中

this.setContent(e); 把模板添加到user-list的ul节点中

}

});

var Base = View;

return Base.extend({

....... //此处省略

initData: function(storage, autoLoad){

var me = this;

me._datasource = new DataSource({

    identifier: user-list',

    storage: storage,

    url: ‘../myinfo/userImfor.json’,

    pageParam: 'pageIndex',

    requestParams: {          //与后台交付时需要传递的参数

    }

});

            var listEl = this.getElement("#user-list");  //容器的element

template = _.template(this.elementHTML(“#userImfor”)); //加载模板

this._serviceList = new ListView({

id : "listview",

el : listEl,

itemClass:RankListItem,

    userData:{template:template},

dataSource : me._datasource //在listview内部把数据添加到指定的节点中

});

}

});

});