zoukankan      html  css  js  c++  java

  • KnockoutJS 3.X API 第四章 表单绑定(10) 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结合是专门用来处理各种浏览器的不同机制，即使在应对不同的文字输入机制也能保持一致和直接更新模型。
    

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

      
    hasFocus绑定目的
    

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

  • 如果您的视图模型属性设置为true或者false，相关的元素将成为聚焦的或未聚焦。 

  • 如果用户手动对焦或unfocuses相关元件，所述视图模型属性将被设置为true或false相应。 

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

    示例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，而零，null，undefined，和空字符串将被解释为false。 

        当用户选中或取消选中该复选框，将KO你的模型属性设置为true或false。 

        如果你的参数解析为一个被给予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模型属性。对于复选框，它会从数组删除旧值并添加新的价值。对于单选按钮，它只会更新模型值。
    



                

                

                  查看全文
                

              
              

              
  • 

                相关阅读:
    
                
                  Yum与list结合
                    
    DNS辅助
                    
    DHCP中继
                    
    apache+SSL 搭建https
                    
    vsftpd服务器
                    
    根据Eclipse SVN changelog使用ANT自动打增量包
                    
    SHELL 近期学习
                    
    Tomcat源码学习一
                    
    oracle笔记
                    
    Linux 下安装 SVN服务器
                    
                        
              
    • 
              
    
              
  • 
                原文地址：https://www.cnblogs.com/smallprogram/p/5948340.html
              
    • 

            
          
    


          
          
    
            

            

          
    
        
    
      
      
    


      

      
    
        
    
          Copyright © 2011-2022 走看看