knockout 多值绑定

Posted 2020-06-09

knockout 这种东西现在已经很流行了，相信很多人对它的使用都已经很熟悉了，最近项目开发中发现knockout 绑定用的有些不怎么充分，发现整个page的code 有点累赘。

1.在绑定click 时间的时候传递 参数：

<a class="edit icon-link" id="savelink" href="javascript:void(0)" data-bind="click: $root.save.bind($data, ‘SaveDetail‘)"><span class="l1icon-pencil"></span><span class="a-text ">Save Changes</span></a>
<a class="icon-link" href="javascript:void(0)" data-bind="click: $root.save.bind($data, ‘CancelSaveDetail‘)"><span class="l1icon-close "></span><span class="a-text ">Cancel Changes</span></a>

这里的2个a标签都是 绑定同一个click方法（save），我们需要在调用save的时候需要区分是那个a标签所为，所以我们用参数来区分。

2.同时绑定多个属性：

  <aaui-datepicker data-bind="attr:{id: ‘time‘+PaymentScheduleDetailId()} , event:{change: $root.timeup,keydown:$root.timedown}"></aaui-datepicker>

这里我们实际上是绑定了ID属性（id属性也含有固定部分），同时绑定了change和keydown 事件。注意一般even前面需要逗号+空格。

    <td class=""  data-bind="text: $root.sections[‘paymentSchedule‘].data().CurrencySymbol() + PendingAm().toFixed(2), class:PaymentStatus()==5 && PendingAm()<=0?‘del‘:‘‘"></td>

这里我们同时绑定的text属性（text属性是2个属性方法拼接的结果） 和class 属性，class前面的空格是必须的哦

  <td class="" data-bind=" class:PaymentStatus()==5 && AmountCollected()<=0 ?‘del‘:‘‘, style:{ paddingBottom: PaymentStatus() == 1 ? ‘50px‘ : ‘‘ }">

这里的class绑定的表达式是不是相比上面的要复杂了，同时这里也绑定了style 属性，注意style 属性必须是javascript能够识别的，比如这里不能是 padding-bottom而必须是 paddingBottom，我在绑定的时候写成paddingbottom一致也有结果，也纠结了几分钟。

<td class="" data-bind="text: $root.sections[‘paymentSchedule‘].data().CurrencySymbol()+Total().toFixed(2), class:PaymentStatus()==5?‘del‘:‘‘, style:{ paddingBottom: PaymentStatus() == 1 ? ‘50px‘ : ‘‘ }"></td>

看这个td绑定的东西是不是比较多，不然你用knock if要写几个重复的语句。

<!-- ko if: AmountCollected() == 0 && PendingAm()==0 -->
<a href="javascript:void(0)" data-bind="click: $root.CancelDetail" class="remove l1icon-trash"></a>
<!-- /ko -->

其实knock if里面也可以写的比较复杂，很多都需要仔细测试和实践。可以参考官方说明http://knockoutjs.com/documentation/if-binding.html

http://www.cnblogs.com/TomXu/archive/2011/11/24/2256878.html

http://www.cnblogs.com/TomXu/archive/2011/11/23/2256854.html