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

knockout 多值绑定的更多相关文章

  1. Knockout: 使用CSS绑定和event的blur失去焦点事件, 给未通过校验的输入框添加红色边框突出显示.

    目的:使用knockout提供的机制实现输入框失去焦点后的校验工作,并使用CSS绑定给未通过校验的输入框添加红色边框突出显示. 步骤: 先在htm中添加.error的css样式, 并在输入框中的dat ...

  2. WPF实现多值绑定特性以及多值转换

    WPF中的实现 我们首先来看一下常规的绑定 <Window    x:Class="WpfApplicationSample.MainWindow"    xmlns=&qu ...

  3. [vue]v-bind: sytle/class-bind&属性值绑定

    v-bind - style绑定 - class绑定 - 属性值绑定 <!DOCTYPE html> <html lang="en"> <head&g ...

  4. 总结:WPF中MultiBinding多值绑定的方法

    原文:总结:WPF中MultiBinding多值绑定的方法 一.Xaml中绑定代码: <TextBlock  Grid.Row="5" Grid.Column="3 ...

  5. WPF多值绑定及多值转换(MultiBinding和IMultiValueConverter)

    WPF可以使用MultiBinding进行多值绑定,使用IMultiValueConverter进行多值转换 例: (1)转换器 public class ContentConverter : IMu ...

  6. WPF中DatePiker值绑定以及精简查询

    WPF中DatePiker值绑定以及精简查询 1.WPF中DatePiker值绑定 Xaml中值绑定使用Text <DatePicker Text="{Binding strMinDa ...

  7. (七)Knockout 创建自定义绑定

    创建自定义绑定 你可以创建自己的自定义绑定 – 没有必要非要使用内嵌的绑定(像click,value等).你可以你封装复杂的逻辑或行为,自定义很容易使用和重用的绑定.例如,你可以在form表单里自定义 ...

  8. Knockout: 实践CSS绑定和jQuery的blur失去焦点事件, 给未通过校验的输入框添加红色边框突出显示.

    目的: 实践一下Knockout提供的CSS绑定功能和JQuery的blur失去焦点事件, 这次不使用Knockout的afterkeydown事件了. 步骤: 先在htm中添加.error的css样 ...

  9. Knockout: 实践CSS绑定和afterkeydown事件, 给未通过校验的输入框添加红色边框突出显示; 使用afterkeydown事件自动将输入转大写字母.

    目的: 实践一下Knockout提供的CSS绑定功能和afterkeydown事件. 步骤: 先在htm中添加.error的css样式, 并在输入框中绑定css: { error: !firstNam ...

随机推荐

  1. leetcode 二叉搜索树中第K小的元素 python

          二叉搜索树中第K小的元素     给定一个二叉搜索树,编写一个函数 kthSmallest 来查找其中第 k 个最小的元素. 说明:你可以假设 k 总是有效的,1 ≤ k ≤ 二叉搜索树元 ...

  2. hdu 4461 第37届ACM/ICPC杭州赛区I题

    题意:给两个人一些棋子,每个棋子有其对应的power,若b没有或者c没有,或者二者都没有,那么他的total power就会减1,total power最少是1,求最后谁能赢 如果b或c出现的话,fl ...

  3. BZOJ2085 : [Poi2010]Hamsters

    设g[i][j]为i串至少加上几个字符后才能包含j,可以通过Hash求出. 然后就是求经过m-1条边的最短路,用倍增加速Floyed即可,时间复杂度$O(n^3\log m)$. #include&l ...

  4. 使用Xcode打包上传APP

    1.打开xcode,进入product->Scheme->EditScheme,找到Archive,最上面的设备选择IOSDevice,在BuildConfiguration中选中Rele ...

  5. 2010-2011 ACM-ICPC, NEERC, Moscow Subregional Contest Problem K. KMC Attacks 交互题 暴力

    Problem K. KMC Attacks 题目连接: http://codeforces.com/gym/100714 Description Warrant VI is a remote pla ...

  6. Windows 10原版ISO下载地址(持续更新)

    Windows 10本质上,它们与 Win7.XP 时代的 SP1.SP2.SP3 这样的大型更新版是一样的,只不过微软很蛋疼地为它们起上一个难记地要死的名字,仅此而已.如果你把“一周年更新”看作 S ...

  7. 何时调用C++复制构造函数和拷贝构造函数(转)

    1. 何时调用复制构造函数 复制构造函数用于将一个对象复制到新创建的对象中.也就是说,它用于初始化过程中,而不是常规的赋值过程中.类的复制构造函数原型通常如下: class_name(const cl ...

  8. VIM简单配置(windows)

    set number set history=1000000 set tabstop=4 set shiftwidth=4 set smarttab set nocp filetype plugin ...

  9. 【DevOps】谁说大象不能跳舞?

    作者:范军 (Frank Fan) 新浪微博:@frankfan7   微信:frankfan7 很多企业,尤其是大企业在产品开发和运维上存在着一些普遍问题,比如开发周期长.人员合作程度不高.开发和运 ...

  10. linux socket编程示例

    #include <sys/socket.h> #include <netinet/in.h> #include <arpa/inet.h> #include &l ...