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>

 

转载于:https://www.cnblogs.com/xjbBill/p/7306991.html