KnockoutJS 3.X API 第四章 表单绑定(10) textInputhasFocuschecked绑定

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了KnockoutJS 3.X API 第四章 表单绑定(10) textInputhasFocuschecked绑定相关的知识,希望对你有一定的参考价值。

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

    源码:

    <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) textInputhasFocuschecked绑定的主要内容,如果未能解决你的问题,请参考以下文章

    KnockoutJS 3.X API 第四章 数据绑定 UI绑定

    KnockoutJS 3.X API 第四章 数据绑定 控制流foreach绑定

    KnockoutJS 3.X API 第四章 数据绑定 控制流with绑定

    KnockoutJS 3.X API 第四章 数据绑定 控制流if绑定和ifnot绑定

    KnockoutJS 3.X API 第六章 组件 组件注册

    KnockoutJS 3.X API 第三章 计算监控属性 参考手册