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

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

前言

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

当用户编辑表单控件的时候, view model对应的属性值会自动更新。同样,当你更新view model属性的时候,相对应的元素值在页面上也会自动更新。

注:如果你在checkbox或者radio button上使用checked绑定来读取或者写入元素的 checked状态,而不是value 值的绑定。

简单示例

 代码如下对两个input进行value的属性绑定

<p>Login name: <input data-bind="value: userName"/></p>
<p>Password: <input type="password" data-bind="value: userPassword"/></p>
<script type="text/javascript" src="~/Scripts/knockout-2.3.0.debug.js"></script>  
<script type="text/javascript">
    var viewModel = {
        userName: ko.observable(""),        
        userPassword: ko.observable("abc")
    };
    ko.applyBindings(viewModel);
</script> 

运行后效果为

注意密码的type为password

KO设置此参数为元素的value值。之前的值将被覆盖。

    如果参数是监控属性observable的,那元素的value值将根据参数值的变化而更新,如果不是,那元素的value值将只设置一次并且以后不在更新。

    如果你提供的参数不是一个数字或者字符串(而是对象或者数组)的话,那显示的value值就是yourParameter.toString() 的内容(通常没用,所以最好都设置为数字或者字符串)。

    不管什么时候,只要你更新了元素的值,那 KO都会将view model对应的属性值自动更新。默认情况下当用户离开焦点(例如onchange事件)的时候,KO才更新这个值,但是你可以通过第2个参数valueUpdate来特别指定改变值的时机。

valueUpdate

  如果你使用valueUpdate参数,那就是意味着KO将使用自定义的事件而不是默认的离开焦点事件。下面是一些最常用的选项:

            “change”(默认值) - 当失去焦点的时候更新view model的值,或者是<select> 元素被选择的时候。

            “keyup” – 当用户敲完一个字符以后立即更新view model。

            “keypress” – 当用户正在敲一个字符但没有释放键盘的时候就立即更新view model。不像 keyup,这个更新和keydown是一样的。

            “afterkeydown” – 当用户开始输入字符的时候就更新view model。主要是捕获浏览器的keydown事件或异步handle事件。

        上述这些选项,如果你想让你的view model进行实时更新,使用“afterkeydown”是最好的选择。

<p>Your value: <input data-bind="value: someValue, valueUpdate: 'afterkeydown'"/></p>
<p>You have typed: <span data-bind="text: someValue"></span></p>

绑定下拉菜单drop-down list(例如SELECT)

 Knockout对下拉菜单drop-down list绑定有一个特殊的支持,那就是在读取和写入绑定的时候,这个值可以是任意JavaScript对象,而不必非得是字符串。在你让你用户选择一组model对象的时候非常有用。具体例子,参考options绑定。

类似,如果你想创建一个multi-select list,参考selectedOptions绑定。

更新observable和non-observable属性值

如果你用value绑定将你的表单元素和你的observable属性关联起来,KO设置的2-way的双向绑定,任何一方改变都会更新另外一方的值。

 但是,如果你的元素绑定的是一个non-observable属性(例如是一个原始的字符串或者JavaScript表达式) ,KO会这样执行:

  1.如果你绑定的non-observable属性是简单对象,例如一个常见的属性值,KO会设置这个值为form表单元素的初始值,如果你改变form表单元素的值,KO会将值重新写回到view mode的这个属性。但当这个属性自己改变的时候,元素却不会再变化了(因为不是observable的),所以它仅仅是1-way绑定。

  2.如果你绑定的non-observable属性是复杂对象,例如复杂的JavaScript 表达式或者子属性,KO也会设置这个值为form表单元素的初始值,但是改变form表单元素的值的时候,KO不会再写会view model属性,这种情况叫one-time-only value setter,不是真正的绑定。

例如:

<p>First value: <input data-bind="value: firstValue"/></p>          <!-- two-way binding -->
<p>Second value: <input data-bind="value: secondValue"/></p>        <!-- one-way binding -->
<p>Third value: <input data-bind="value: secondValue.length"/></p>  <!-- no binding --> 

<script type="text/javascript">
    var viewModel = {
        firstValue: ko.observable("hello"), // Observable
        secondValue: "hello, again"// Not observable
    };
    ko.applyBindings(viewModel);
</script>

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Knockout.Js官网学习(Mapping插件)

      Knockout设计成允许你使用任何JavaScript对象作为view model。必须view model的一些属性是observable的,你可以使用...

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

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

    aehyok
  • Knockout.Js官网学习(加载或保存JSON数据)

    Knockout可以实现很复杂的客户端交互,但是几乎所有的web应用程序都要和服务器端交换数据(至少为了本地存储需要序列化数据),交换数据最方便的就是使用JSO...

    aehyok
  • SpringBoot 实战 (十三) | 整合 MyBatis (XML 版)

    如题,今天介绍 SpringBoot 与 Mybatis 的整合以及 Mybatis 的使用,之前介绍过了 SpringBoot 整合MyBatis 注解版的使...

    一个优秀的废人
  • 扒一扒Google Coral Edge TPU开发套件

    在物联网场景下,每个智能设备都会产生大量的数据,这意味着将有大量数据将被发送回数据中心。边缘计算可以在网络边缘对数据进行分类,将部分数据放在边缘处理,从而减少到...

    GPUS Lady
  • ubuntu18虚拟机克隆后ip相同的解决方法

    最近使用虚拟机装ubuntu18.04,克隆后发现ip是相同的,应为克隆采用的是文件克隆,所以所有的东西都一样。解决最简单的方法就是修改mac然后启动使用net...

    砸漏
  • ubuntu18虚拟机克隆后ip相同的解决办法

    最近使用虚拟机装ubuntu18.04,克隆后发现ip是相同的,应为克隆采用的是文件克隆,所以所有的东西都一样。解决最简单的办法就是修改mac然后启动使用net...

    砸漏
  • 第二家Amazon Go无人店将于今秋开业,面积扩大70%

    亚马逊周二证实,其依靠计算机视觉和人工智能来摆脱收银台的未来主义杂货店,将于今年秋季开设第二家。

    AiTechYun
  • 实现一个带下拉弹簧动画的 ScrollView

    在刚推出的 Support Library 25.3.0 里面新增了一个叫 SpringAnimation 的动画,也就是弹簧动画。要是用它来做一个滑动控件下拉...

    NanBox
  • 响铃:哈啰顺风车隔空喊话滴滴,同业共鸣还是对手宣战?

    滴滴顺风车到底什么时候回来?不知道,从最近又是公布整改方向,又是管理层高调发声来看,似乎快了。

    曾响铃

扫码关注云+社区

领取腾讯云代金券