KO的使用例子

时间:2023-03-08 20:21:31
KO的使用例子
 var model;
function QueuingRecordViewModel() {
model = this; // model = this 不可缺少
model.info = ko.observable(); // 声明一个对象去接收数据
api.personalInfo.getQueuingDetail({queueRecordId:queueRecordId}, function(data, response) {
if (data.code == 0) {
model.info(data.data); // 请求成功时,保存数据
if (data.data.status == 0) {
document.getElementById("qnum_status").innerHTML = '排队中';
} else if (data.data.status == 1) {
document.getElementById("qnum_status").innerHTML = '办理中';
} else {
document.getElementById("qnum_status").innerHTML = '办理结束';
} }
});
}
ko.applyBindings(new QueuingRecordViewModel());

绑定数据:

 <div class="scrollbox" data-bind="with:model.info"> <!-- 绑定单条数据用 :with, 多条用:foreach -->
<div class="separated"></div>
<div class="info_flowlist">
<dl class="list_dl clear">
<dt class="list_dt">姓名</dt>
<dd class="list_dd" data-bind="text:handleBy"></dd>
</dl>
<dl class="list_dl clear">
<dt class="list_dt">身份证号</dt>
<dd class="list_dd" data-bind="text:idCardNo"></dd>
</dl>
<dl class="list_dl clear">
<dt class="list_dt">电话号码</dt>
<dd class="list_dd" data-bind="text:mobile"></dd>
</dl>
<dl class="list_dl clear">
<dt class="list_dt">在线取号类型</dt>
<dd class="list_dd" data-bind="text:type"></dd>
</dl>
<dl class="list_dl clear">
<dt class="list_dt">事项</dt>
<dd class="list_dd" data-bind="text:matterName"></dd>
</dl>
</div>
</div>