KO的使用例子
1 var model; 2 function QueuingRecordViewModel() { 3 model = this; // model = this 不可缺少 4 model.info = ko.observable(); // 声明一个对象去接收数据 5 api.personalInfo.getQueuingDetail({queueRecordId:queueRecordId}, function(data, response) { 6 if (data.code == 0) { 7 model.info(data.data); // 请求成功时,保存数据 8 if (data.data.status == 0) { 9 document.getElementById("qnum_status").innerHTML = '排队中'; 10 } else if (data.data.status == 1) { 11 document.getElementById("qnum_status").innerHTML = '办理中'; 12 } else { 13 document.getElementById("qnum_status").innerHTML = '办理结束'; 14 }16 } 17 }); 18 } 19 ko.applyBindings(new QueuingRecordViewModel());
绑定数据:
1 <div class="scrollbox" data-bind="with:model.info"> <!-- 绑定单条数据用 :with, 多条用:foreach --> 2 <div class="separated"></div> 3 <div class="info_flowlist"> 4 <dl class="list_dl clear"> 5 <dt class="list_dt">姓名</dt> 6 <dd class="list_dd" data-bind="text:handleBy"></dd> 7 </dl> 8 <dl class="list_dl clear"> 9 <dt class="list_dt">身份证号</dt> 10 <dd class="list_dd" data-bind="text:idCardNo"></dd> 11 </dl> 12 <dl class="list_dl clear"> 13 <dt class="list_dt">电话号码</dt> 14 <dd class="list_dd" data-bind="text:mobile"></dd> 15 </dl> 16 <dl class="list_dl clear"> 17 <dt class="list_dt">在线取号类型</dt> 18 <dd class="list_dd" data-bind="text:type"></dd> 19 </dl> 20 <dl class="list_dl clear"> 21 <dt class="list_dt">事项</dt> 22 <dd class="list_dd" data-bind="text:matterName"></dd> 23 </dl> 24 </div> 25 </div>