1. 程式人生 > >WeX5動態生成data,並繫結動態生成的list

WeX5動態生成data,並繫結動態生成的list

因為專案需要,無法使用提前弄好靜態的,所以,將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;
});