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

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

    Focus programmatically 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

    源码:

    <p>Send me spam: <input type="checkbox" data-bind="checked: wantsSpam" /></p>
    <div data-bind="visible: wantsSpam">
    Preferred flavor of spam:
    <div><input type="radio" name="flavorGroup" value="cherry" data-bind="checked: spamFlavor" /> Cherry</div>
    <div><input type="radio" name="flavorGroup" value="almond" data-bind="checked: spamFlavor" /> Almond</div>
    <div><input type="radio" name="flavorGroup" value="msg" data-bind="checked: spamFlavor" /> Monosodium Glutamate</div>
    </div> <script type="text/javascript">
    var viewModel = {
    wantsSpam: ko.observable(true),
    spamFlavor: ko.observable("almond") // Initially selects only the Almond radio button
    }; // ... then later ...
    viewModel.spamFlavor("msg"); // Now only Monosodium Glutamate is checked
    </script>

    参数

    • 主要技术参数

      KO设置元素的选中状态,以配合您的参数值。任何以前选中的状态将被覆盖。您的参数被解释的方式取决于你绑定元素是什么类型:

      • 对于复选框,当参数值true时KO将设置为元素为选中状态,当它为false则为未选中状态。如果你给定的不是一个布尔值,KO会松散地解释。这意味着,非零数字和非null对象和非空字符串都将被解释为true,而零,nullundefined,和空字符串将被解释为false

        当用户选中或取消选中该复选框,将KO你的模型属性设置为truefalse

        如果你的参数解析为一个被给予array数组。在这种情况下,KO将设置检查DOM中value属性是否与数组值匹配,如果值匹配则被选中,如果不匹配则不勾选。

        当用户选中或取消选中该复选框,将KO更改对应视图模型属性的值。就像示例2一样。

      • 对于单选按钮,KO将检查视图模型的值是否等于单选按钮DOM节点的value属性或检查视图模型属性值是否等于checkedValue参数指定的值。就像示例3一样。

        当选择了用户改变其单选按钮,KO会设置模型属性值为选定的单选按钮的值。像示例3中,点击value="cherry"的单选按钮后将设置viewModel.spamFlavor"cherry"

      如果你的参数是监控属性类型,每当值改变绑定将更新元素的选中状态。如果该参数是非监控属性,它只会在首次运行时设置元素的选中状态,以后再不会更新。

    • 其他参数

      • checkedValue

        checkedValue参数定义了使用值与checked绑定结合,而不是元素的value属性。如果你想要的值是一个字符串(如整数或对象)以外的东西,或者你想动态设置的值,这非常有用。

        例如下边的例子:

        源码:

  • <!-- ko foreach: items -->
    <input type="checkbox" data-bind="checkedValue: $data, checked: $root.chosenItems" />
    <span data-bind="text: itemName"></span>
    <!-- /ko --> <script type="text/javascript">
    var viewModel = {
    items: ko.observableArray([
    { itemName: 'Choice 1' },
    { itemName: 'Choice 2' }
    ]),
    chosenItems: ko.observableArray()
    };
    </script>

    如果你的checkedValue参数是一个监控属性,当值的变化和元素是否被选中,绑定将更新checked模型属性。对于复选框,它会从数组删除旧值并添加新的价值。对于单选按钮,它只会更新模型值。

    KnockoutJS 3.X API 第四章 表单绑定(10) textInput、hasFocus、checked绑定的更多相关文章

    1. KnockoutJS 3.X API 第四章 表单绑定(9) value绑定

      目的 value绑定主要用于DOM元素给视图模型赋值用的.通常用于<input><select><textarea>等元素. value绑定与text绑定的区别在于 ...

    2. KnockoutJS 3.X API 第四章 表单绑定(11) options绑定

      目的 options绑定主要用于下拉列表中(即<select>元素)或多选列表(例如,<select size='6'>).此绑定不能与除<select>元素之外的 ...

    3. KnockoutJS 3.X API 第四章 表单绑定(6) click绑定

      目的 click绑定主要作用是用于DOM元素被点击时调用相关JS函数.最常见用于button.input.a元素. 例如: You've clicked timesClick me var viewM ...

    4. KnockoutJS 3.X API 第四章 表单绑定(7) event绑定

      目的 event绑定即为事件绑定,即当触发相关DOM事件的时候回调函数.例如keypress,mouseover或者mouseout等 例如: Mouse over me Details var vi ...

    5. KnockoutJS 3.X API 第四章 表单绑定(8) submit、enable、disable绑定

      submit绑定目的 submit绑定即为提交绑定,通常用于form元素.这种绑定方式会打断默认的提交至服务器的操作.转而提交到你设定好的提交绑定回调函数中.如果要打破这个默认规则,只需要在回调函数中 ...

    6. KnockoutJS 3.X API 第四章 表单绑定(12) selectedOptions、uniqueName绑定

      selectedOptions绑定目的 selectedOptions绑定控制当前选择多选列表中的哪些元素. 这旨在与<select>元素和选项绑定结合使用. 当用户选择或取消选择多选列表 ...

    7. KnockoutJS 3.X API 第四章(13) template绑定

      目的 template绑定(模板绑定)使用渲染模板的结果填充关联的DOM元素. 模板是一种简单方便的方式来构建复杂的UI结构 . 下面介绍两种使用模板绑定的方法: 本地模板是支持foreach,if, ...

    8. JavaScript高级程序设计学习笔记第十四章--表单

      1.在 HTML 中,表单是由<form>元素来表示的,而在 JavaScript 中,表单对应的则是 HTMLFormElement 类型. HTMLFormElement 继承了 HT ...

    9. 深入浅出ExtJS 第四章 表单与输入控件

      4.1 制作表单 var form = new Ext.form.FormPanel({ title:'form', defaultType:'textfield', buttonAlign:'cen ...

    随机推荐

    1. 复星昆仲杨光:VR行业四大痛点

      2016年,可是说是VR产业的爆发之年,从公司层面到资本层面都对VR产业给予了厚望,期望其能够在移动互联网之后带来革命性的突破,掀起新一轮技术主导的商业革命.而创业者们已经跃跃欲试,期望在资本的支持下 ...

    2. 关于Certificate、Provisioning Profile、App ID的介绍及其之间的关系

      1.概念介绍 如果你拥有一个开发者账户的话,在iOS Dev Center打开Certificates, Indentifiers & Profiles,你就可以看到如下的列表: Profil ...

    3. 1.iOS直播ijkplayer(第一周)

      准备工作: 1.使用的B站的开源框架ijkplayer ,下载地址: https://github.com/Bilibili/ijkplayer ijkplayer 是一个基于 ffplay 的轻量级 ...

    4. 【转】使用Fiddler进行HTTP断点调试。

      这是Fiddler又一强大和实用的工具之一.通过设置断点,Fiddler可以做到: 1. 修改HTTP请求头信息.例如修改请求头的UA, Cookie, Referer 信息,通过“伪造”相应信息达到 ...

    5. selenium support

        org.openqa.selenium.support.ui.Select select = new org.openqa.selenium.support.ui.Select(driver.fi ...

    6. MVC特性

      MVC与ASP.NET MVC基础概念 MVC是Model-View-Controller的缩写. MVC将应用程序划分为3大组件:模型\视图\控制器. MVC不是ASP.NET所特有,它只是一种开发 ...

    7. Nodejs学习路线图

      前言 用Nodejs已经1年有余,陆陆续续写了48篇关于Nodejs的博客文章,用过的包有上百个.和所有人一样,我也从Web开发开始,然后到包管 理,再到应用系统的开发,最后开源自己的Nodejs项目 ...

    8. myrocks记录格式分析

      概况 rocksdb作为KV存储引擎,那么myrocks记录最终会以kv的形式存储在rocksdb中.MySQL中的表一般由若干索引组成, 在innodb存储引擎中,每个索引对应一颗B树,而在rock ...

    9. React Native也正式发布了

      var React = require('react-native'); var { TabBarIOS, NavigatorIOS } = React; var App = React.create ...

    10. JavaFX結合 JDBC, Servlet, Swing, Google Map及動態產生比例圖 (3):部署設定及應用 (转帖)

      說明:這一篇主要是說明如何將程式部署到Application Server,以及程式如何運作,產生的檔案置於何處,以及如何以瀏覽器呈現(Applet),或是當成桌面應用程式,或是 桌面Applet,這 ...