WeX5动态生成data,并绑定动态生成的list

来源:互联网 发布:什么网站有利于优化 编辑:程序博客网 时间:2024/06/05 08:54

因为项目需要,无法使用提前弄好静态的,所以,将demo整理下,发上来,供各位朋友参考

define(function(require){
    var $ = require("jquery");
    var justep = require("$UI/system/lib/justep");
    var Data = require("$UI/system/components/justep/data/data");
    var List = require("$UI/system/components/justep/list/list");
    
    

    var Model = function(){
        this.callParent();
        
        //动态创建data组件,详细见system/components/justep/data/demo/data.w
         new Data(this, {
            xid : 'mainData',//和this.mainData一致
            defCols : {
                sID : {
                    type : 'String',
                    label : 'ID'
                },
                sName : {
                    type : 'String',
                    label : '名字',
                    rules : {
                        required : {
                            params : true,
                            message : '名字必须有值'
                        }
                    }
                },
                sAge : {
                    type : 'Integer',
                    label : '年龄'
                }
            },
            idColumn : 'sID'
        });
    };


    Model.prototype.modelLoad = function(event){
        this.comp('mainData').newData({defaultValues:[{sID:'001',sName:'xiaomin',sAge:18},{sID:'002',sName:'zhang',sAge:38}]});
    
            //list组件动态创建说明http://doc.wex5.com/?p=7598#005
            var cfg = {
                    xid: 'list1',
                    autoLoad: true,
                    data: 'mainData',
                    template: '<ul class="x-list-template" xid="listTemplateUl1"><li xid="li2"><span bind-text=ref(\'sName\')/></li></ul>',
                    parentNode: this.getElementByXid('content1')
                };
            new List(cfg);
        
        
    };


    return Model;
});

阅读全文
0 0
原创粉丝点击