星空网 > 软件开发 > Java

KnockoutJS 3.X API 第四章 表单绑定 textInput、hasFocus、checked绑定

textInput绑定目的

textInput绑定主要用于<input>或者<textarea>元素。他提供了DOM和viewmodel的双向更新。不同于value绑定,textinput绑定是实时更新的。

例如:

Login name:

Password:

ViewModel:

源码:

<p>Login name: <input data-bind="textInput: userName" /></p><p>Password: <input type="password" data-bind="textInput: userPassword" /></p> ViewModel:<pre data-bind="text: ko.toJSON($root, null, 2)"></pre> <script>  ko.applyBindings({    userName: ko.observable(""),    // Initially blank    userPassword: ko.observable("abc") // Prepopulate  });</script>

备注1:textInput绑定 VS value绑定

虽然value结合也可以进行双向文本框和视图模型性能的结合,但是博主更喜欢textInput,因为他是实时更新的。value绑定与textInput绑定的主要的区别在于:

  • 即时更新

    value默认情况下,只有当用户将焦点从文本框移开后才会更新您的模型。textInput每次击键或其他文本输入时立刻更新模型。

  • 浏览器的事件处理

    不同的浏览器有着文本输入机制,如剪切,拖动,或接受自动完成建议的事件在不同的浏览器中机制是不一致。value绑定,有额外的选项,如valueUpdate: afterkeydown获得对特定事件的更新,但是有可能不兼容所有的浏览器。

    textInput结合是专门用来处理各种浏览器的不同机制,即使在应对不同的文字输入机制也能保持一致和直接更新模型。

    不要尝试使用valuetextInput在相同的元素上进行绑定。

     

    hasFocus绑定目的

    hasFocus绑定是视图模型属性与DOM元素的焦点状态绑定。它是一个双向绑定,所以:

  • 如果您的视图模型属性设置为true或者false,相关的元素将成为聚焦的或未聚焦。
  • 如果用户手动对焦或unfocuses相关元件,所述视图模型属性将被设置为truefalse相应。

    如果您正在构建中,编辑元素动态显示复杂的形式,你想控制,用户应该开始打字,或插入符的响应位置,这是非常有用的。

    示例1

    这个例子中当文本框当前具有焦点时则显示消息,并可以使用一个按钮通过编程方式触发焦点。

    The textbox has focus

    源码:

    <input data-bind="hasFocus: isSelected"><button data-bind="click: setIsSelected">Focus programmatically</button> <span data-bind="visible: isSelected">The textbox has focus</span> <script>var viewModel = {  isSelected: ko.observable(false),  setIsSelected: function() { this.isSelected(true) }};ko.applyBindings(viewModel,document.getElementById("eq2"));</script>

    示例2

    因为hasFocus绑定是双向绑定,这可以使切换的“编辑”模式更加便捷。

    Name:  

    Click the name to edit it; click elsewhere to apply changes.


    源码:

    <p>  Name:   <b data-bind="visible: !editing(), text: name, click: edit">&nbsp;</b>  <input data-bind="visible: editing, value: name, hasFocus: editing" /></p><p><em>Click the name to edit it; click elsewhere to apply changes.</em></p><script>function PersonViewModel(name) {  // Data  this.name = ko.observable(name);  this.editing = ko.observable(false);       // Behaviors  this.edit = function() { this.editing(true) }} ko.applyBindings(new PersonViewModel("Bert Bertington"),document.getElementById("eq3"));</script>

    checked绑定目的

    checked绑定主要用于复选框(<input type='checkbox'>)或单选按钮(<input type='radio'>) 并与视图模型属性进行绑定。

    当用户更改了表单控件,这将更新您的视图模型属性的值。同样,当您更新您的视图模型的值,也将直接反映到表单控件上。

    注意:对于文本框,下拉列表,以及所有以非可勾选表单控件,需要使用value绑定或者textInput绑定读写元素的值,而不是checked绑定。

    示例1:复选框绑定

    Send me spam:


    源码:

    <p>Send me spam: <input type="checkbox" data-bind="checked: wantsSpam" /></p> <script type="text/javascript">  var viewModel = {    wantsSpam: ko.observable(true) // Initially checked  };   // ... then later ...  viewModel.wantsSpam(false); // The checkbox becomes unchecked</script>

    示例2:多复选框

    Send me spam:

    Preferred flavors of spam: Cherry
    Almond
    Monosodium Glutamate


    源码:

    <p>Send me spam: <input type="checkbox" data-bind="checked: wantsSpam" /></p><div data-bind="visible: wantsSpam">  Preferred flavors of spam:  <div><input type="checkbox" value="cherry" data-bind="checked: spamFlavors" /> Cherry</div>  <div><input type="checkbox" value="almond" data-bind="checked: spamFlavors" /> Almond</div>  <div><input type="checkbox" value="msg" data-bind="checked: spamFlavors" /> Monosodium Glutamate</div></div> <script type="text/javascript">  var viewModel = {    wantsSpam: ko.observable(true),    spamFlavors: ko.observableArray(["cherry","almond"]) // Initially checks the Cherry and Almond checkboxes  };   // ... then later ...  viewModel.spamFlavors.push("msg"); // Now additionally checks the Monosodium Glutamate checkbox</script>

    示例3:单选按钮

  • Send me spam:

    Preferred flavor of spam: Cherry
    Almond
    Monosodium Glutamate





    原标题:KnockoutJS 3.X API 第四章 表单绑定 textInput、hasFocus、checked绑定

    关键词:JS

    JS
    *特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

    ​这5个技巧可以助你亚马逊新手店铺快速出单:https://www.ikjzd.com/articles/141560
    亚马逊新店铺该如何保持活跃度?:https://www.ikjzd.com/articles/141561
    想要提升亚马逊店铺销量?需要用到这6点:https://www.ikjzd.com/articles/141562
    亚马逊新卖家:到底做亚马逊需要什么样的能力?:https://www.ikjzd.com/articles/141563
    欧舒丹美国分公司申请破产 负债近1.62亿美元:https://www.ikjzd.com/articles/141565
    东南亚电商平台Shopee正扩大其巴西业务规模:https://www.ikjzd.com/articles/141566
    在古巴做游轮 古巴旅游项目:https://www.vstour.cn/a/363194.html
    西藏旅游攻略自驾游需要多少天 去西藏旅游自驾游要多久时间:https://www.vstour.cn/a/363195.html
    相关文章
    我的浏览记录
    最新相关资讯
    海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流