knockoutjs总结

之前写的两篇博客
knockoutJs在项目中的使用
knockout.js做table列表

参考
KnockOut : Introduction

特殊变量

$root

$root指的是ko所绑定的DOM，可以解决类似于作用域的问题，一般来说with、foreach等，在对应的dom标签区间中的属性是对应于with绑定的对象以及foreach循环中每一个对象中的变量，如果想在该标签区间内使用ViewModel中的其它属性，则会报错说找不到或者未定义之类的，那么就需要使用$root来指定作用域为ViewModel.
如下代码

 <div class="input_list clearfix" data-bind="with:cpafInfoCondition"><div class="input_box clearfix"><div class="tabs-input clearfix fl"><p class="fl">行政区划</p><ul class="select fl"><li class="selected">-请选择-</li><li class="option"><ul data-bind="html:$root.divisionUl"></ul></li></ul></div>.....

self.cpafInfoCondition = ko.observable({currentPage:0,pageSize : 20,divisionProvince : '',cpafCno : '',cpafName : '',cpafStatus : '',cpaNumBegin : '',cpaNumEnd : '',orgForm : ''});...//区划self.divisionUl = (function () {

$parent

$parent 是指当前DOM元素直接的外部父类（只有一层）;

with绑定

参考:knockoutjs六 with 绑定
在我看来，with是一个作用域或者上下文的限制。假设对象obj={key：val}，那么在with:obj下可以直接使用key，而不需要使用obj.key
with还有个作用，当with的条件是null或者是undefined，那么下面的子元素就不会加载，如果不空就加载，这样就避免了一些错误，不会当obj是null或者是undefined的时候还调用obj.key发生报错。

虚拟元素

参考:Creating custom bindings that support virtual elements
如下


<!-- ko if:cpafNameNoData -->
<tr class="no-data"><td colspan="4">暂无符合条件的数据</td>
</tr>
<!-- /ko -->
<!-- ko foreach : cpafNameList -->
<tr class="midlist-top"><td class="zczsbh" data-bind="text:divisionProvince"></td><td class="zsxm" data-bind="text:cpafNo"></td><td class="zszt" data-bind="text:cpafName"></td><td class="swsmc" data-bind="text:cpafAbbr"></td>
</tr>
<!-- /ko -->

使用做一个虚拟节点，注意写法，**在–和尖括号之间是没有空格的，**个人觉得有点像vue中使用Template元素渲染的意思

事件绑定及参数传递

以click为例

简单绑定

data-bind="click:funcName"

如果有多个事件需要一起绑定

data-bind="event:{click:clickFuncName,change:changeFuncName}"

如果需要传递参数
默认的，knockout会传递两个参数出来。
第一个参数是自己定义的ViewModel，第二个则是触发的event
- 第一种方式

//这里的$data不可以省略
//这种方式,默认参数在最后.
data-bind="click:clickFuncName($data,'param1','param2')"

- 第二种方式

<button data-bind="click: function(data, event) { myFunction('param1', 'param2', data, event) }">Click me
</button>

问题总结

在layer中使用knock的奇怪问题

需求:当没有数据的时候显示"没有查询到符合条件的数据"，否则显示数据
问题描述：当数据从无到有或者从有到无时，tbody再也无法显示任何内容了
问题代码如下

//layer弹出表格
layer.open({title: '处罚信息',type: 1,content: $(cpafPunish),area: ['1080px', '460px'],success: function () {cpafPunishViewModel = new CpafPunishViewModel();ko.cleanNode(cpafPunish);ko.applyBindings(cpafPunishViewModel, cpafPunish);cpafPunishViewModel.init(data.CPAF_NO);},end: function () {$(cpafPunish).hide();}});......
//表格的viewmodel
function CpafPunishViewModel() {var self = this;self.cpafPunishNoData = ko.observable(true);self.cpafPunishList = ko.observableArray([]);//查询列表self.init = function (cpafNo) {self.cpafPunishList([]);$.postAjax(contentPath + "/searchBfLogin/searchCpafPunish", {cpafNo: cpafNo}, function (list) {self.cpafPunishNoData(list.length < 1);self.cpafPunishList(list);}, true);}}

下表是表格

<div id="cpafPunish" style="display: none;height:50px;margin:0 auto;" class="layer_notice"><div class="table-wrap"><table class="conList"><thead><th width="80">行政区划</th><th width="150">事务所名称</th><th width="120">执业证书编号</th><th width="120">处罚类型</th><th width="120">做出处罚时间</th></thead><tbody class="midlist-body"><!-- ko if: cpafPunishNoData --><tr class="no-data"><td colspan="5">暂无符合条件的数据</td></tr><!-- /ko --><!-- ko foreach: cpafPunishList --><tr class="midlist-top"><td data-bind="text:DIVISION_NAME"></td><td data-bind="text:CPAF_NAME"></td><td data-bind="text:CPAF_CNO"></td><td data-bind="text:PUNISH_TYPE"></td><td data-bind="text:FILE_DATE"></td></tr><!-- /ko --></tbody></table></div>
</div>

解决问题的代码如下，即只new和绑定都只一次

self.viewPunish = function (data) {var cpafPunish = document.getElementById('cpafPunish');layer.open({title: '处罚信息',type: 1,content: $(cpafPunish),area: ['1080px', '460px'],success: function () {if (cpafPunishViewModel === undefined) {cpafPunishViewModel = new CpafPunishViewModel();ko.cleanNode(cpafPunish);ko.applyBindings(cpafPunishViewModel, cpafPunish);}cpafPunishViewModel.init(data.CPAF_NO);},end: function () {$(cpafPunish).hide();}});};

暂时还找不到合理的解释。

Knockout checkbox click 冲突

给checkbox绑定click，发现checkbox无法选中。网上查阅资料发现knockout在处理checkbox的checked和click时，需要一点小技巧
使用knockout同时绑定checked和click时，checkbox点击不勾选，在绑定的click事件中一定要返回true;

        self.checkAll = function () {var target = event.srcElement || event.target;$('.sfq-all-check').prop('checked', $(target).prop('checked'));return true;};