专栏首页技术博客Knockout.Js官网学习(enable绑定、disable绑定)

Knockout.Js官网学习(enable绑定、disable绑定)

enable绑定

enable绑定使DOM元素只有在参数值为 true的时候才enabled。在form表单元素input,select,和textarea上非常有用。

enable简单示例

<h2>enableBind</h2>
<p>    <input type='checkbox' data-bind="checked: hasCellphone"/>    I have a cellphone</p>
<p>    Your cellphone number:    <input type='text' data-bind="value: cellphoneNumber, enable: hasCellphone"/></p>
<script type="text/javascript" src="~/Scripts/knockout-2.3.0.debug.js"></script>
<script type="text/javascript">
    var viewModel = {
        hasCellphone: ko.observable(false),
        cellphoneNumber:ko.observable("")
    };
    ko.applyBindings(viewModel);
</script>

这个例子里,“Your cellphone number”后的text box 初始情况下是禁用的,只有当用户点击标签 “I have a cellphone”的时候才可用。

声明DOM元素是否可用enabled。

非布尔值会被解析成布尔值。例如0和null被解析成false,21和非null对象被解析给true。

如果你的参数是observable的,那绑定会随着observable值的改变而自动更新enabled/disabled状态。如果不是,则只会设置一次并且以后不再更新。

任意使用JavaScript表达式

 不紧紧限制于变量 – 你可以使用任何JavaScript表达式来控制元素是否可用。例如

<button data-bind="enable: parseAreaCode(viewModel.cellphoneNumber()) != '555'">   
   Do something
</button>

disable绑定

disable绑定使DOM元素只有在参数值为 true的时候才disabled。在form表单元素input,select,和textarea上非常有用。

disable绑定和enable绑定正好相反,详情请参考enable绑定

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Knockout.Js官网学习(selectedOptions绑定、uniqueName 绑定)

    selectedOptions绑定用于控制multi-select列表已经被选择的元素,用在使用options绑定的<select>元素上。

    aehyok
  • Knockout.Js官网学习(value绑定)

    value绑定是关联DOM元素的值到view model的属性上。主要是用在表单控件<input>,<select>和<textarea>上。

    aehyok
  • 设计模式之五(策略模式)

    策略模式:它定义了算法家族,分别封装起来,让它们之间可以相互替换,此模式让算法的变化,不会影响到使用算法的客户。

    aehyok
  • C++经典算法题-数字拆解

    依此类推,请问一个指定数字NUM的拆解方法个数有多少个? 解法 我们以上例中最后一个数字5的拆解为例,假设f( n )为数字n的可拆解方式个数,而f(x, ...

    cwl_java
  • 线性代数精华——从正交向量到正交矩阵

    这个基本上是中学当中数学课本上的概念,两个向量的内积非常简单,我们直接看公式回顾一下:

    TechFlow-承志
  • Webpack的异步加载原理及分包策略(深度好文,建议收藏)

    webpack ensure 有人称它为异步加载,也有人称为代码切割,他其实就是将 js 模块给独立导出一个.js 文件,然后使用这个模块的时候,再创建一个 s...

    winty
  • requireJS

    requireJS(http://www.requirejs.cn/)是一个JavaScript模块加载器。它非常适合在浏览器中使用,使用RequireJS加...

    奋飛
  • 使用JS异步回调解决pjax加载问题

    使用pjax会导致部分js插件无法加载,最后我选择异步加载解决问题。 你可能会问异步就够了为什么还有个callback是干啥的,不急你先看看代码。

    乔千
  • 数据结构 | 每日一练(107)

    ——老子

    C语言入门到精通
  • 转管理,先要问自己的5个问题

    想要成为一名管理者,并不是做个决定这么简单,做管理需要一套完全不同的技能。好的架构师,好的技术专家,并不一定代表一个好的管理者。

    架构师之路

扫码关注云+社区

领取腾讯云代金券