/*!
* WeX5 v3 (http://www.justep.com)
* Copyright 2015 Justep, Inc.
* Licensed under Apache License, Version 2.0 (http://www.apache.org/licenses/LICENSE-2.0)
* 文件名：demo.js
*/
define(function(require) {
var $ = require("jquery");
var bind = require("bind");
var Data = require("../data");
var BizData = require("../bizData");
var Input = require("../../input/input");
var Output = require("../../output/output");
var Textarea = require("../../textarea/textarea"); // 增加自定义规则
Data.Rules.add('isExistStr', {
// val：校验的值，params：规则给出的参数，ctx：当前的上下文，包含source（对应的data），rowid（行id），col(列名)
validator : function(val, params, ctx) {
var ret = false;
if ('string' === typeof (val)) {
ret = val.indexOf(params) > -1;
}
return ret;
},
message : '必须包含字符 {0}'
}); var Model = function() {
this.callParent(); this.mainData = new Data(this, {
xid : 'mainData',
defCols : {
SA_Task : {
type : 'String',
label : 'ID'
},
sName : {
type : 'String',
label : '名字',
rules : {
required : {
params : true,
message : '名字必须有值'
}
}
},
sAge : {
type : 'Integer',
label : '年龄'
/*
* , rules :{ min: {params:18, message:'年龄必须大于等于18' }, max:
* {params:50, message:'年龄必须小于等于50' }}
*/
},
sAmt : {
type : 'Double',
label : '合计',
relation : 'EXPRESS',
calculate : "js:$model.slaveData?$model.slaveData.Sum('sAmt',$row):0"
}
},
idColumn : 'SA_Task'
}); this.mainData.ageAvg = bind.computed(function() {
var ret = this.mainData.Avg('sAge');
return ret;
}, this).extend({
mustEqual : 30
}); this.mainData.amtSum = bind.computed(function() {
var ret = this.mainData.Sum('sAmt');
return ret;
}, this).extend({
mustEqual : 50
}); this.slaveData = new Data(this, {
xid : 'slaveData',
defCols : {
SA_Task_Info : {
type : 'String',
label : '任务明细'
},
SA_Task : {
type : 'String',
label : '主ID'
},
sName : {
type : 'String',
label : '名字'
},
sInfo : {
type : 'String',
label : '说明'
},
sCount : {
type : 'Integer',
label : '数量',
rules : {
required : {
params : true,
message : '数量必须有值'
},
integer : {
params : true,
message : '数量无效'
}
}
},
sUnitprice : {
type : 'Double',
label : '单价',
rules : {
required : {
params : true,
message : '单价必须有值'
},
number : {
params : true,
message : '单价无效'
}
}
},
sAmt : {
type : 'Double',
label : '合计',
relation : 'EXPRESS',
rules : {
calculate : "js:val('sCount') * val('sUnitprice')"
}
}
},
idColumn : 'SA_Task_Info',
master : {
xid : 'mainData',
relation : 'SA_Task'
}
}); this.bizDataReadonly = bind.observable(false);// 控制整个data的只读
this.bizData = new BizData(this, {
xid : 'bizData',
readonly : "js:$model.bizDataReadonly.get()",
defCols : {
DEMO_TABLE1 : {
type : 'String',
relation : 'DEMO_TABLE1',
label : 'DEMO_TABLE1'
},
fString : {
type : 'String',
relation : 'DEMO_TABLE1.fString',
label : 'fString',
// 上下文包括{$model:this.getModel(),$data:this,$row:r,$val,$rowID:rowid,$col:col}
rules : {
readonly : "js:500<val('fInteger')",
required : {
params : true,
message : 'fString必须有值'
},
isExistStr : 'abc',
constraint : {
params : {
expr : "js:$val.indexOf(val('fInteger'))>-1"
},
message : '通用规则，必须包含fInteger'
}
}
},
fInteger : {
type : 'Integer',
relation : 'DEMO_TABLE1.fInteger',
label : 'fInteger',
rules : {
required : {
params : true,
message : 'fInteger必须有值'
},
number : {
params : true,
message : 'fInteger无效'
}
}
},
fFloat : {
type : 'Float',
relation : 'DEMO_TABLE1.fFloat',
label : 'fFloat',
rules : {
number : {
params : true,
message : 'fFloat无效'
}
}
},
fDecimal : {
type : 'Decimal',
relation : 'DEMO_TABLE1.fDecimal',
label : 'fDecimal'
},
fDate : {
type : 'Date',
label : 'fDate',
relation : 'DEMO_TABLE1.fDate'
},
fDateTime : {
type : 'DateTime',
label : 'fDateTime',
relation : 'DEMO_TABLE1.fDateTime'
},
fTime : {
type : 'Time',
label : 'fTime',
relation : 'DEMO_TABLE1.fTime'
},
fText : {
type : 'Text',
label : 'fText',
relation : 'DEMO_TABLE1.fText'
},
version : {
type : 'Integer',
label : 'version',
relation : 'DEMO_TABLE1.version'
}
},
idColumn : 'DEMO_TABLE1',
dataModel : '/demo/components/data',
queryAction : 'queryDEMO_TABLE1Action',
newAction : 'createDEMO_TABLE1Action',
saveAction : 'saveDEMO_TABLE1Action',
limit : 5,
autoLoad : true
}); var self = this;
this.bizChanged = bind.observable(false);
this.bizData.on("onDataChange", function(event) {
self.bizChanged.set(event.source.isChanged());
});
this.bizData.on("onSaveCommit", function(event) {
self.bizChanged.set(event.source.isChanged());
}); this.bizDataDirectDelete = bind.observable(this.bizData.directDeleteMode);
this.bizDataDirectDelete.subscribe(function(v) {
self.bizData.directDeleteMode = v;
});
this.bizDataDeleteConfirm = bind.observable(this.bizData.deleteConfirm);
this.bizDataDeleteConfirm.subscribe(function(v) {
self.bizData.deleteConfirm = v;
}); this.input6Render = function(event) {
event.text = event.value == '1' ? '男' : '女';
};
this.output6Render = function(event) {
event.html = event.value == '1' ? '男' : '<span>output组件输出html：</span><input type="button" value="' + event.value + '"/>';
};
this.createInput = function() {
var parent = this.getElementByXid("create-input");
if (parent) {
var cfg = {
'bind-ref' : "bizData1.ref('fDateTime')",
format : "yyyy-MM-dd hh:mm",
parentNode : parent
};
new Input(cfg);
} else
alert('error');
};
this.createOutput = function() {
var parent = this.getElementByXid("create-output");
if (parent) {
var cfg = {
'bind-ref' : "bizData1.ref('fText')",
parentNode : parent
};
new Output(cfg);
} else
alert('error');
};
this.createTextarea = function() {
var parent = this.getElementByXid("create-output");
if (parent) {
var cfg = {
'bind-ref' : "bizData1.ref('fText')",
parentNode : parent
};
new Textarea(cfg);
} else
alert('error');
}; }; Model.prototype.mainDataNew = function(defaultValue) {
defaultValue = defaultValue || {};
this.mainData.newData({
defaultValues : [ {
SA_Task : defaultValue['SA_Task'] || Data.UUID(),
sName : defaultValue['sName'] || '',
sAge : defaultValue['sAge'] || (Math.round(Math.random() * 40) + 20)
} ]
});
}; Model.prototype.slaveDataNew = function(defaultValue) {
defaultValue = defaultValue || {};
this.slaveData.newData({
defaultValues : [ {
SA_Task_Info : defaultValue['SA_Task_Info'] || Data.UUID(),
sName : defaultValue['sName'] || (this.mainData.getValue('sName') + '---' + this.slaveData.getCount()),
sCount : defaultValue['sCount'] || (Math.round(Math.random() * 150) + 30),
sUnitprice : defaultValue['sUnitprice'] || (Math.round(Math.random() * 200) * 0.5),
sInfo : defaultValue['sInfo'] || "无"
} ]
});
}; Model.prototype.test = function() {
// 测试applyBindings速度
var t = "<div><label data-bind=\"text:bizData.label('fString')\"></label><input data-bind=\"value:bizData.ref('fString')\" /></div><div><label data-bind=\"text:bizData.label('fInteger')\"></label><input data-bind=\"value:bizData.ref('fInteger')\" /></div><div><label data-bind=\"text:bizData.label('fFloat')\"></label><input data-bind=\"value:bizData.ref('fFloat')\" /></div><div><label data-bind=\"text:bizData.label('fDecimal')\"></label><input data-bind=\"value:bizData.ref('fDecimal')\" /></div><div><label data-bind=\"text:bizData.label('fDateTime')\"></label><input data-bind=\"value:bizData.ref('fDateTime')\" /></div><div><label data-bind=\"text:bizData.label('fText')\"></label><input data-bind=\"value:bizData.ref('fText')\" /></div><div><label data-bind=\"text:bizData.label('fTime')\"></label><input data-bind=\"value:bizData.ref('fTime')\" /></div>";
var tt = "";
for ( var i = 0; i < 200; i++)
// 创建200行数据
tt = tt + t;
$('.tr').append("<td class='td1'>" + tt + "</td>");
var b1 = new Date();
bind.applyBindings(this, $('.td1')[0]);
alert("applyBindings:" + ((new Date()).getTime() - b1.getTime()));
}; Model.prototype.bizData1DataChange = function(event) {
alert('bizData1DataChange');
}; return Model;
});
demo.w <?xml version="1.0" encoding="utf-8"?> <div xmlns="http://www.w3.org/1999/xhtml" component="$UI/system/components/justep/window/window">
<div component="$UI/system/components/justep/model/model" xid="model">
<div component="$UI/system/components/justep/data/bizData" xid="bizData1" autoLoad="true"
concept="DEMO_TABLE1" columns="version,fString,fInteger,fFloat,fDecimal,fDate,fDateTime,fTime,fText"
limit="2" onDataChange="bizData1DataChange">
<reader action="/demo/components/logic/action/queryDEMO_TABLE1Action"/>
<writer action="/demo/components/logic/action/saveDEMO_TABLE1Action"/>
<creator action="/demo/components/logic/action/createDEMO_TABLE1Action"/>
<calculateRelation relation="calcCheckBox"/>
<calculateRelation relation="recNO" type="Integer"/>
<rule>
<readonly>
<expr><![CDATA[]]></expr>
</readonly>
<col name="fString">
<readonly>
<expr><![CDATA[js:1000<val('fInteger')]]></expr>
</readonly>
<calculate>
<expr/>
</calculate>
<constraint>
<expr><![CDATA[js:$val.indexOf(val('fInteger'))<0]]></expr>
<message xid="default1"><![CDATA[]]></message>
</constraint>
<required>
<expr><![CDATA[js:true]]></expr>
</required>
</col>
</rule>
</div>
<div component="$UI/system/components/justep/data/bizData" xid="selectData" autoLoad="true"
concept="DEMO_TABLE1" columns="fString,fInteger,fFloat,fDecimal,fDate,fDateTime,fTime,fText"
limit="5">
<reader action="/demo/components/logic/action/queryDEMO_TABLE1Action"/>
</div>
<div component="$UI/system/components/justep/data/data" xid="data1" idColumn="fName">
<column name="fName" type="String" label="显示名称"/>
<column name="fAge" type="Integer" label="年龄"/>
<rule xid="rule1"/>
<data><![CDATA[
[{fName:'abc',fAge:18},{fName:'test',fAge:28}]
]]></data>
</div>
</div>
<div>
<h1>Data,BizData Component Demo</h1>
<h3>Data组件</h3>
<div>
<table>
<tr valign="top">
<td>
<div>主当前行:</div>
<div>
<label bind-text="mainData.label('sName')"/>
<input bind-value="mainData.ref('sName')" bind-validation="mainData.ref('sName')"/>
</div>
<div>
<label bind-text="mainData.label('sAge')"/>
<input bind-value="mainData.ref('sAge')"/>
</div>
<div>
<label bind-text="mainData.label('sAmt')"/>
<input bind-value="mainData.ref('sAmt')"/>
</div>
<div>
<span>平均年龄：</span>
<span bind-text="mainData.ageAvg" id="span2"/>
</div>
<div>
<span>总价格：</span>
<span bind-text="mainData.amtSum" id="span3"/>
</div>
<div>
<span>修改状态：</span>
<span bind-text="mainData.isChanged()" id="span3"/>
</div>
</td>
<td>
<div>主数据：</div>
<div>
<input bind-click="mainDataNew" type="button" value="new"
id="input6" class="btn btn-info"/>
<input bind-click="call(mainData,mainData.deleteData)" type="button"
value="del" id="input6-1" class="btn btn-info"/>
<input bind-click="call(mainData,mainData.tojson)" type="button"
value="getJson" id="input7" class="btn btn-info"/>
<input bind-click="call(mainData,mainData.first)" type="button"
value="<<" id="input8" class="btn btn-info"/>
<input bind-click="call(mainData,mainData.pre)" type="button"
value="<" id="input9" class="btn btn-info"/>
<input bind-click="call(mainData,mainData.next)" type="button"
value=">" id="input11" class="btn btn-info"/>
<input bind-click="call(mainData,mainData.last)" type="button"
value=">>" id="input12" class="btn btn-info"/>
</div>
<ul bind-foreach="mainData.datas">
<li bind-css="{ curRow: $model.mainData.currentRow.get() == $object }">
<div>
<label bind-text="label('sName')"/>
<input bind-value="ref('sName')"/>
</div>
<div>
<label bind-text="label('sAge')"/>
<input bind-value="ref('sAge')"/>
</div>
<div>
<label bind-text="label('sAmt')"/>
<input bind-value="ref('sAmt')"/>
</div>
<div>
<label bind-text="label('SA_Task')"/>
<span bind-text="ref('SA_Task')"/>
</div>
</li>
</ul>
</td>
<td>
<div>从数据：</div>
<div>
<input bind-click="slaveDataNew" type="button" value="new"
id="input6-1" class="btn btn-info"/>
<input bind-click="call(slaveData,slaveData.deleteData)" type="button"
value="del" id="input6-2" class="btn btn-info"/>
<input bind-click="call(slaveData,slaveData.first)" type="button"
value="<<" id="input8-1" class="btn btn-info"/>
<input bind-click="call(slaveData,slaveData.pre)" type="button"
value="<" id="input9-1" class="btn btn-info"/>
<input bind-click="call(slaveData,slaveData.next)" type="button"
value=">" id="input11-1" class="btn btn-info"/>
<input bind-click="call(slaveData,slaveData.last)" type="button"
value=">>" id="input12-1" class="btn btn-info"/>
</div>
<ul bind-foreach="slaveData.datas">
<li bind-css="{ curRow: $model.slaveData.currentRow.get() == $object}">
<div>
<label bind-text="label('sName')"/>
<input bind-value="ref('sName')"/>
</div>
<div>
<label bind-text="label('sCount')"/>
<input bind-value="ref('sCount')"/>
</div>
<div>
<label bind-text="label('sUnitprice')"/>
<input bind-value="ref('sUnitprice')"/>
</div>
<div>
<label bind-text="label('sAmt')"/>
<input bind-value="ref('sAmt')"/>
</div>
<div>
<label bind-text="label('sInfo')"/>
<input bind-value="ref('sInfo')"/>
</div>
<div>
<label bind-text="label('SA_Task_Info')"/>
<span bind-text="ref('SA_Task_Info')"/>
</div>
<div>
<label bind-text="label('SA_Task')"/>
<span bind-text="ref('SA_Task')"/>
</div>
</li>
</ul>
</td>
<td>
<div>
<label bind-text="slaveData.label('sName')"/>
<input bind-value="slaveData.ref('sName')"/>
</div>
<div>
<label bind-text="slaveData.label('sCount')"/>
<input bind-value="slaveData.ref('sCount')"/>
</div>
<div>
<label bind-text="slaveData.label('sUnitprice')"/>
<input bind-value="slaveData.ref('sUnitprice')"/>
</div>
<div>
<label bind-text="slaveData.label('sAmt')"/>
<input bind-value="slaveData.ref('sAmt')"/>
</div>
<div>
<label bind-text="slaveData.label('sInfo')"/>
<input bind-value="slaveData.ref('sInfo')"/>
</div>
<div>
<label bind-text="slaveData.label('SA_Task_Info')"/>
<span bind-text="slaveData.ref('SA_Task_Info')"/>
</div>
<div>
<label bind-text="slaveData.label('SA_Task')"/>
<span bind-text="slaveData.ref('SA_Task')"/>
</div>
</td>
</tr>
</table>
<p bind-text="mainData.getInvalidInfo()"/>
<p bind-text="slaveData.getInvalidInfo()"/>
</div>
<h3>BizData组件</h3>
<div>
<label>数据约束规则</label>
<label>fString:</label>
<label>1、必须有值</label>
<label>2、必须包含字符串'abc'</label>
<label>3、必须包含fInteger</label>
<label>fInteger:</label>
<label>1、必须有值</label>
<label>2、必须是数字</label>
<label>数据只读规则</label>
<label>当fInteger大于500时fString只读</label>
</div>
<div>
<span>修改状态：</span>
<span bind-text="bizChanged"/>
<span>校验状态：</span>
<span bind-text="bizData.isValid()"/>
<span>记录数：</span>
<span bind-text="bizData.getCount()"/>
</div>
<div>
<span>直接删除：</span>
<input type="checkbox" bind-checked="bizDataDirectDelete"/>
<span>，删除提示：</span>
<input type="checkbox" bind-checked="bizDataDeleteConfirm"/>
<span>，data只读：</span>
<input type="checkbox" bind-checked="bizDataReadonly"/>
</div>
<div>
<input bind-click="call(bizData,bizData.newData)" type="button" value="New"
class="btn btn-info"/>
<input bind-click="call(bizData,bizData.refreshData)" type="button"
value="Refresh" class="btn btn-info"/>
<input bind-click="call(bizData,bizData.deleteData)" type="button"
value="Del" class="btn btn-info"/>
<input bind-click="call(bizData,bizData.saveData)" type="button" value="Save"
class="btn btn-info"/>
<input bind-click="call(bizData,bizData.first)" type="button" value="<<"
class="btn btn-info"/>
<input bind-click="call(bizData,bizData.pre)" type="button" value="<"
class="btn btn-info"/>
<input bind-click="call(bizData,bizData.next)" type="button" value=">"
class="btn btn-info"/>
<input bind-click="call(bizData,bizData.last)" type="button" value=">>"
class="btn btn-info"/>
<input bind-click="test" type="button" value="test" class="btn btn-info"/>
</div>
<table>
<tr valign="top" class="tr">
<td id="td">
<ul bind-foreach="bizData.datas">
<li bind-css="{ curRow:$model.bizData.currentRow.get() == $object }">
<div>
<label bind-text="label('fString')"/>
<input bind-value="ref('fString')" bind-validation="ref('fString')" bind-readonly="ref('fString')"/>
</div>
<div>
<label bind-text="label('fInteger')"/>
<input bind-value="ref('fInteger')" bind-validation="ref('fInteger')" bind-readonly="ref('fInteger')"/>
</div>
<div>
<label bind-text="label('fFloat')"/>
<input bind-value="ref('fFloat')" bind-readonly="ref('fFloat')"/>
</div>
<div>
<label bind-text="label('fDecimal')"/>
<input bind-value="ref('fDecimal')" bind-readonly="ref('fDecimal')"/>
</div>
<div>
<label bind-text="label('fDateTime')"/>
<input bind-value="ref('fDateTime')" bind-readonly="ref('fDateTime')"/>
</div>
<div>
<label bind-text="label('fText')"/>
<input bind-value="ref('fText')" bind-readonly="ref('fText')"/>
</div>
<div>
<label bind-text="label('fTime')"/>
<input bind-value="ref('fTime')" bind-readonly="ref('fTime')"/>
</div>
</li>
</ul>
</td>
<td>
<div>当前行:</div>
<div>
<label bind-text="bizData.label('fString')"/>
<input class="form-control String" bind-value="bizData.ref('fString')" bind-validation="bizData.ref('fString')" bind-readonly="bizData.ref('fString')"/>
<!--
-->
<!--
<input component="$UI/system/components/input/input" config='{"width":160,"placeHolder":"请输入字符串"}'
xid="input1" bind-ref="bizData.ref('fString')">
<input/>
<div xid="search">
<img style="width:16px; height:22px" src="$UI/system/components/input/img/datePicker.gif"></img>
</div>
</div>
-->
</div>
<div>
<label bind-text="bizData.label('fInteger')"/>
<input bind-value="bizData.ref('fInteger')" bind-validation="bizData.ref('fInteger')" bind-readonly="bizData.ref('fInteger')"/>
<!--
-->
</div>
<div>
<label bind-text="bizData.label('fFloat')"/>
<input bind-value="bizData.ref('fFloat')" bind-readonly="bizData.ref('fFloat')"/>
</div>
<div>
<label bind-text="bizData.label('fDecimal')"/>
<input bind-value="bizData.ref('fDecimal')" bind-readonly="bizData.ref('fDecimal')"/>
</div>
<div>
<label bind-text="bizData.label('fDateTime')"/>
<input bind-value="bizData.ref('fDateTime')" bind-readonly="bizData.ref('fDateTime')"/>
</div>
<div>
<label bind-text="bizData.label('fText')"/>
<input bind-value="bizData.ref('fText')" bind-readonly="bizData.ref('fText')"/>
</div>
<div>
<label bind-text="bizData.label('fTime')"/>
<input bind-value="bizData.ref('fTime')" bind-readonly="bizData.ref('fTime')"/>
</div>
</td>
</tr>
</table>
<h3>描述的BizData组件</h3>
<div>
<a component="$UI/system/components/justep/button/button" class="btn btn-info btn-icon-left" onClick="{operation:'bizData1.new'}">
<i/><span></span>
</a>
<a onClick="{operation:'bizData1.refresh'}" component="$UI/system/components/justep/button/button"
class="btn btn-info btn-icon-left">
<i/><span></span>
</a>
<a onClick="{params:{ids:'js:$m.ids'},operation:'bizData1.delete'}" component="$UI/system/components/justep/button/button"
class="btn btn-info btn-icon-left">
<i/><span></span>
</a>
<a onClick="{operation:'bizData1.save'}" component="$UI/system/components/justep/button/button"
class="btn btn-info btn-icon-left">
<i/><span></span>
</a>
<a onClick="createInput" component="$UI/system/components/justep/button/button"
label="createInput" class="btn btn-info">
<i/><span>createInput</span>
</a>
<a onClick="createOutput" component="$UI/system/components/justep/button/button"
label="createOutput" class="btn btn-info">
<i/><span>createOutput</span>
</a>
<a onClick="createTextarea" component="$UI/system/components/justep/button/button"
label="createTextarea" class="btn btn-info">
<i/><span>createTextarea</span>
</a>
<a onClick="{operation:'bizData1.firstRow'}" component="$UI/system/components/justep/button/button"
label="" class="btn btn-info btn-icon-left">
<i/><span></span>
</a>
<a component="$UI/system/components/justep/button/button"
class="btn btn-info btn-icon-left" onClick="{operation:'bizData1.prevRow'}">
<i/><span></span>
</a>
<a component="$UI/system/components/justep/button/button"
class="btn btn-info btn-icon-right" onClick="{operation:'bizData1.nextRow'}">
<i/><span></span>
</a>
<a onClick="{operation:'bizData1.lastRow'}" component="$UI/system/components/justep/button/button"
label="" class="btn btn-info btn-icon-right">
<i/><span></span>
</a>
</div>
<div>当前行:</div>
<div>
<label bind-text="bizData1.label('fString')"/>
<input component="$UI/system/components/justep/input/input" placeHolder="请输入字符串"
style="width:300px" xid="input1" class="form-control" data="bizData1" bind-ref="bizData1.ref('fString')"/>
<input component="$UI/system/components/justep/input/password" placeHolder="请输入字符串"
style="width:300px" xid="input1-pw" class="form-control" data="bizData1" bind-ref="bizData1.ref('fString')"/>
<span style="display: block;" component="$UI/system/components/justep/button/checkbox"
class="x-checkbox" name="checkbox" value="1" label="选项----1" bind-ref="bizData1.ref('fString')"/>
<span component="$UI/system/components/justep/button/toggle" class="x-toggle"
type="checkbox" name="checkbox1" value="1" ON="开" OFF="关" bind-ref="bizData1.ref('fString')"/>
<div component="$UI/system/components/justep/select/radioGroup" class="x-radio-group"
_vertical="true" name="r" bind-itemset="selectData" bind-itemsetValue="ref('fString')"
bind-itemsetLabel="ref('fString')" bind-ref="bizData1.ref('fString')"/>
</div>
<div>
<label bind-text="bizData1.label('fInteger')"/>
<input component="$UI/system/components/justep/input/range" xid="input2"
min="1" max="10000" data="bizData1" bind-ref="bizData1.ref('fInteger')"/>
</div>
<div>
<label bind-text="bizData1.label('fFloat')"/>
<input component="$UI/system/components/justep/input/input" placeHolder="请输入数值"
xid="input3" class="form-control" data="bizData1" bind-ref="bizData1.ref('fFloat')"/>
</div>
<div>
<label bind-text="bizData1.label('fDecimal')"/>
<input component="$UI/system/components/justep/input/input" placeHolder="请输入数值"
xid="input4" class="form-control" data="bizData1" bind-ref="bizData1.ref('fDecimal')"/>
</div>
<div xid="create-input">
<label bind-text="bizData1.label('fDateTime')"/>
<input component="$UI/system/components/justep/input/input" placeHolder="请输入日期时间"
xid="input5" class="form-control" data="bizData1" format="yy-MM-dd hh:mm" bind-ref="bizData1.ref('fDateTime')"/>
</div>
<div xid="create-output">
<label bind-text="bizData1.label('fText')"/>
<select class="form-control" component="$UI/system/components/justep/select/select" bind-ref="bizData1.ref('fText')" bind-labelRef="bizData1.ref('fString')"
bind-options="selectData" bind-optionsLabel="fString" bind-optionsValue="DEMO_TABLE1"
bind-optionsCaption="请选择..."/>
<input component="$UI/system/components/justep/input/input" placeHolder="请输入text"
xid="input6" class="form-control" data="bizData1" bind-ref="bizData1.ref('fText')"
onRender="input6Render"/>
<input component="$UI/system/components/justep/input/input" placeHolder="请输入text"
xid="input6-1" class="form-control" data="bizData1" bind-ref="bizData1.ref('fText')"/>
<span component="$UI/system/components/justep/button/checkbox" class="x-checkbox" bind-ref="bizData1.ref('fText')" label="选项----1"></span>
<div component="$UI/system/components/justep/select/checkboxGroup" class="x-checkbox-group"
name="c" bind-itemset="selectData" bind-itemsetValue="ref('DEMO_TABLE1')"
bind-itemsetLabel="ref('fString')" bind-ref="bizData1.ref('fText')"/>
</div>
<div>
<label bind-text="bizData1.label('fTime')"/>
<input component="$UI/system/components/justep/input/input" placeHolder="请输入时间"
xid="input7" class="form-control" data="bizData1" bind-ref="bizData1.ref('fTime')"/>
</div>
<ul bind-foreach="bizData1.datas">
<li bind-css="{ curRow: $model.bizData1.currentRow.get() == $object }">
<div>
<label bind-text="label('fString')"/>
<input component="$UI/system/components/justep/input/input" placeHolder="请输入字符串"
xid="input1-1" class="form-control" data="bizData1" bind-ref="ref('fString')"/>
<span style="display: block;" component="$UI/system/components/justep/button/checkbox"
class="x-checkbox" value="1" label="选项----1" bind-ref="ref('fString')"/>
<span component="$UI/system/components/justep/button/toggle" class="x-toggle"
type="checkbox" value="1" ON="开" OFF="关" bind-ref="ref('fString')"/>
</div>
<div>
<label bind-text="label('fInteger')"/>
<input component="$UI/system/components/justep/input/input" xid="input2-1"
class="form-control" data="bizData1" bind-ref="ref('fInteger')"/>
</div>
<div>
<label bind-text="label('fFloat')"/>
<input component="$UI/system/components/justep/input/input" xid="input3-1"
class="form-control" data="bizData1" bind-ref="ref('fFloat')"/>
</div>
<div>
<label bind-text="label('fDecimal')"/>
<input component="$UI/system/components/justep/input/input" xid="input3-1"
class="form-control" data="bizData1" bind-ref="ref('fDecimal')"/>
</div>
<div>
<label bind-text="label('fDateTime')"/>
<input component="$UI/system/components/justep/input/input" placeHolder="请输入日期时间"
xid="input5-1" class="form-control" data="bizData1" format="yyyy-MM-dd hh:mm"
bind-ref="ref('fDateTime')"/>
<div component="$UI/system/components/justep/output/output" placeHolder="请输入日期时间"
xid="output5-1" class="x-output" data="bizData1" format="yyyy-MM-dd hh:mm"
bind-ref="ref('fDateTime')"/>
</div>
<div>
<label bind-text="label('fText')"/>
<div component="$UI/system/components/justep/select/checkboxGroup" class="x-checkbox-group"
name="ccc" bind-itemset="$model.selectData" bind-itemsetValue="ref('DEMO_TABLE1')"
bind-itemsetLabel="ref('fString')" bind-ref="ref('fText')"/>
<select class="form-control" component="$UI/system/components/justep/select/select" bind-ref="ref('fText')" bind-labelRef="ref('fString')"
bind-options="$model.selectData" bind-optionsLabel="fString" bind-optionsValue="DEMO_TABLE1"
bind-optionsCaption="请选择..."/>
<input component="$UI/system/components/justep/input/input" placeHolder="请输入text"
xid="input6-2" class="form-control" data="bizData1" bind-ref="ref('fText')" onRender="input6Render"/>
<input component="$UI/system/components/justep/input/input" placeHolder="请输入text"
xid="input6-21" class="form-control" data="bizData1" bind-ref="ref('fText')"/>
<div component="$UI/system/components/justep/output/output" xid="output6-21"
class="x-output" data="bizData1" bind-ref="ref('fText')" onRender="output6Render"/>
<textarea component="$UI/system/components/justep/textarea/textarea" xid="textarea6-21"
class="form-control" data="bizData1" bind-ref="ref('fText')"/>
</div>
<div>
<label bind-text="label('fTime')"/>
<input component="$UI/system/components/justep/input/input" xid="input3-1"
class="form-control" data="bizData1" bind-ref="ref('fTime')"/>
</div>
</li>
</ul> <h3>描述的Data组件</h3>
<div>
<a component="$UI/system/components/justep/button/button" onClick="{operation:'data1.new'}"
label="" class="btn btn-info btn-icon-left"><i/><span></span></a>
<a onClick="{operation:'data1.refresh'}" component="$UI/system/components/justep/button/button"
label="" class="btn btn-info btn-icon-left"><i/><span></span></a>
<a onClick="{operation:'data1.delete'}" component="$UI/system/components/justep/button/button"
label="" class="btn btn-info btn-icon-left"><i/><span></span></a>
<a onClick="{operation:'data1.save'}" component="$UI/system/components/justep/button/button"
label="" class="btn btn-info btn-icon-left"><i/><span></span></a>
<a onClick="{operation:'data1.firstRow'}" component="$UI/system/components/justep/button/button"
label="" class="btn btn-info btn-icon-left"><i/><span></span></a>
<a onClick="{operation:'data1.prevRow'}" component="$UI/system/components/justep/button/button"
label="" class="btn btn-info btn-icon-left"><i/><span></span></a>
<a onClick="{operation:'data1.nextRow'}" component="$UI/system/components/justep/button/button"
label="" class="btn btn-info btn-icon-right"><i/><span></span></a>
<a onClick="{operation:'data1.lastRow'}" component="$UI/system/components/justep/button/button"
label="" class="btn btn-info btn-icon-right"><i/><span></span></a>
</div>
<div>当前行:</div>
<div>
<label bind-text="data1.label('fName')"/>
<input component="$UI/system/components/justep/input/input" placeHolder="请输入名称"
style="width:300px" xid="input51" class="form-control" data="data1" bind-ref="data1.ref('fName')"/>
</div>
<div>
<label bind-text="data1.label('fAge')"/>
<input component="$UI/system/components/justep/input/input" placeHolder="请输入年龄"
style="width:300px" xid="input52" class="form-control" data="data1" bind-ref="data1.ref('fAge')"/>
</div>
</div>
</div>
网络查找（未验证）：
整理了下list和data组件的绑定关系，请问版主，是否满足以下规律，如果不是，请帮忙指正下小弟。
1. 动态生成的list组件和动态生成的data组件，无法完成绑定，生成list组件时会出错
2. 静态定义的list组件和动态生成的data组件（可以在var Model = function(){}中动态生成data组件），可以正常完成绑定，list显示data组件的数据正常
3. 动态生成的list组件和静态定义的data组件，可以正常完成绑定，list显示data组件的数据正常
4. 静态定义的list组件和静态定义的data组件，可以正常完成绑定，list显示data组件的数据正常