Knockoutjs属性绑定(Bindings)之表单处理(Working with form fields)

我们在使用Knockoutjs最多的时候莫过于使用上次介绍的流程控制(Control flow)和今天将要介绍的表单处理(Working with form fields)了，我们使用表单处理可以帮助我们处理比如事件、验证等功能，下面我们就开始吧。

一、click binding

使用click binding可以对某一个可见的DOM元素进行事件绑定，当用户点击这个元素时会执行对应的方法，完成相应的功能，我们经常在button、input、a等DOM元素上进行click binding。

（1）、下面我们来看一个例子：每当我点击Button之后，点击次数都会加1

<script type="text/javascript" src="knockout-2.2.0.js"></script>

<div> 
    You've clicked <span data-bind="text: numberOfClicks"></span> times 
    <button data-bind="click: incrementClickCounter">Click me</button> 
</div> 
  
<script type="text/javascript">
    var viewModel = {
        numberOfClicks: ko.observable(0),
        incrementClickCounter: function () {
            var previousCount = this.numberOfClicks();
            this.numberOfClicks(previousCount + 1);
        }
    };
    ko.applyBindings(viewModel);
</script>

 

（2）、我们也可以把当前元素作为参数传递给所要调用的方法，如下例子：我们点击按钮，然后删除按钮对应的元素

<script type="text/javascript" src="knockout-2.2.0.js"></script>

<ul data-bind="foreach: places"> 
    <li> 
        <span data-bind="text: $data"></span> 
        <button data-bind="click: $parent.removePlace">Remove</button> 
    </li> 
</ul> 
  
 <script type="text/javascript">
     function MyViewModel() {
         var self = this;
         self.places = ko.observableArray(['London', 'Paris', 'Tokyo']);

         // The current item will be passed as the first parameter, so we know which place to remove 
         self.removePlace = function (place) {
             self.places.remove(place)
         }
     }
     ko.applyBindings(new MyViewModel()); 
</script>

关于这个例子我们有以下的两点说明：

      （a）、如果我们在一个嵌套的元素中使用click binding的话，例如我们在foreach或者with块中使用click binding，但是此时click对应的方法在View Model的根部或者他的父上下文，此时我们需要一个前缀比如$parent或者$root来定位我们的方法。
      （b）、在我们的View Model中我们经常为我们的this起一个别名为self，这样就会防止this指向的地方改变而导致我们程序的错误。

 

（3）、定义事件对象和传递更多的参数

     （a）、定义一个事件

<button data-bind="click: myFunction"> 
    Click me 
</button> 
  
 <script type="text/javascript"> 
    var viewModel = { 
        myFunction: function(data, event) { 
            if (event.shiftKey) { 
                //do something different when user has shift key down 
            } else { 
                //do normal action 
            } 
        } 
    }; 
    ko.applyBindings(viewModel); 
</script>

此时就会判断，如果是shift 键点击的话，则会执行对应的内容，否则执行其他的内容。
  （b）、传递更多的参数

如果我们想要传递很多参数给调用的方法的话，我们可以在标签中包括对应方法要传递的参数等，如下：

<button data-bind="click: function(data, event) { myFunction('param1', 'param2', data, event) }"> 
    Click me 
</button>

但是，如果我们不想要在标签中出现这么多的内容的话，我们可以使用KO的bind方法来进行方法的传递，如下：

<button data-bind="click: myFunction.bind($data, 'param1', 'param2')"> 
    Click me 
</button>

（4）、防止事件的冲突

在默认情况下，Knockoutjs允许事件绑定从一个元素传递到更高一级的元素。比如：一个DOM元素和他的父元素都使用了click事件，如果我们点击其中一个则两个事件都会执行，此时，我们就可以使用“clickBubble”来制定哪个事件不执行，如下：

<div data-bind="click: myDivHandler"> 
    <button data-bind="click: myButtonHandler, clickBubble: false"> 
        Click me 
    </button> 
</div>

在默认的情况下，当点击事件时会首先执行myButtonHandler，然后执行myDivHandler。但是当我们在button上使用的clickBubble:false时，则会跳过myButtonHandler去执行myDivHandler了。

二、event binding

我们也可以使用event binding来进行事件绑定，比如：keypress, mouseover 、 mouseout等

（1）、使用mouseover和mouseout控制是否显示div

<script type="text/javascript" src="knockout-2.2.0.js"></script>

<div> 
    <div data-bind="event: { mouseover: enableDetails, mouseout: disableDetails }"> 
        Mouse over me 
    </div> 
    <div data-bind="visible: detailsEnabled"> 
        Details 
    </div> 
</div> 
  
<script type="text/javascript">
    var viewModel = {
        detailsEnabled: ko.observable(false),
        enableDetails: function () {
            this.detailsEnabled(true);
        },
        disableDetails: function () {
            this.detailsEnabled(false);
        }
    };
    ko.applyBindings(viewModel); 
</script>

（2）、参数传递
当使用event binding的时候，Knockoutjs会默认将当前的Model Value作为第一个参数传递给事件方法。如下：

<script type="text/javascript" src="knockout-2.2.0.js"></script>

<ul data-bind="foreach: places"> 
    <li data-bind="text: $data, event: { mouseover: $parent.logMouseOver }"> </li> 
</ul> 
<p>You seem to be interested in: <span data-bind="text: lastInterest"> </span></p> 
  
 <script type="text/javascript">
     function MyViewModel() {
         var self = this;
         self.lastInterest = ko.observable();
         self.places = ko.observableArray(['London', 'Paris', 'Tokyo']);

         // The current item will be passed as the first parameter, so we know which place was hovered over 
         self.logMouseOver = function (place) {
             self.lastInterest(place);
         }
     }
     ko.applyBindings(new MyViewModel()); 
</script>

（3）、传递多个参数
在进行多个参数传递时，我们可以参照click binding中的多个参数传递，如下：

<div data-bind="event: { mouseover: function(data, event) { myFunction('param1', 'param2', data, event) } }"> 
    Mouse over me 
</div>

我们也可以使用下面的方法进行多个参数的传递：

<button data-bind="event: { mouseover: myFunction.bind($data, 'param1', 'param2') }"> 
    Click me 
</button>

（4）、同样的在event binding中也会有事件的冲突，在click binding中我们使用clickBubble来处理，如果我们要mouseover事件的话我们可以使用mouseoverBubble来处理，如果使用mouseout的话我们可以使用mouseoutBubble来处理等等。

三、submit binding

我们可以使用submit binding进行表单的提交，但我们要注意此时并没有将表单提交给服务器，而是提交给了我们的View Model。使用submit binding的示例如下：

<form data-bind="submit: doSomething"> 
    ... form contents go here ... 
    <button type="submit">Submit</button> 
</div> 
  
<script type="text/javascript"> 
    var viewModel = { 
        doSomething : function(formElement) { 
            // ... now do something  
        } 
    }; 
</script>

四、enable binding

使用enable binding可以很好的控制DOM元素是否显示等（当enable的值为true时），这对input, select,  textarea等特别的有用。下面我们来看一个例子：我们定义一个checkbox和一个text，当用户勾选checkbox以后才能在text中输入内容，否则不能输入：

<script type="text/javascript" src="knockout-2.2.0.js"></script>

<p> 
    <input type='checkbox' data-bind="checked: hasCellphone" /> 
    I have a cellphone 
</p> 
<p> 
    Your cellphone number: 
    <input type='text' data-bind="value: cellphoneNumber, enable: hasCellphone" /> 
</p> 
  
<script type="text/javascript">
    var viewModel = {
        hasCellphone: ko.observable(false),
        cellphoneNumber: ""
    };
    ko.applyBindings(viewModel);
</script>

五、disable binding

disable binding的使用方法和enable binding的使用方法一样，只是判断条件相反。

 

六、value binding

我们可以使用value binding为DOM元素设置默认值，比如：我们使用value为其设置默认的用户名和密码

<script type="text/javascript" src="knockout-2.2.0.js"></script>

<p>Login name: <input data-bind="value: userName" /></p> 
<p>Password: <input type="password" data-bind="value: userPassword" /></p> 
  
<script type="text/javascript"> 
    var viewModel = { 
        userName: ko.observable("123456"),        // Initially blank 
        userPassword: ko.observable("abc"), // Prepopulate 
    }; 
    ko.applyBindings(viewModel);
</script>

七、hasfocus binding

在使用hasfocus binding时，我们可以通过View Model层为一个元素设置true和false来控制hasfocus，也可以在View层对某一个元素进行绑定。

例1：当input获得焦点时则会显示相应的文本

<script type="text/javascript" src="knockout-2.2.0.js"></script>

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

例2：点击文本后即可进行编辑

<script type="text/javascript" src="knockout-2.2.0.js"></script>

<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 type="text/javascript">
    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"));
</script>

八、checked binding

（1）、checkbox使用

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

（2）、radio使用

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

九、options binding

使用options binding可以实现我们的下拉列表框，下面我们看几个例子：

（1）、一个简单的下拉列表

<script type="text/javascript" src="knockout-2.2.0.js"></script>

<p>Destination country: <select data-bind="options: availableCountries"></select></p> 
  
<script type="text/javascript">
    var viewModel = {
        availableCountries: ko.observableArray(['France', 'Germany', 'Spain']) // These are the initial options 
    };

    // ... then later ... 
    viewModel.availableCountries.push('China'); // Adds another option
    ko.applyBindings(viewModel);
</script>

（2）、多选列表框

<script type="text/javascript" src="knockout-2.2.0.js"></script>

<p>Destination country: <select data-bind="options: availableCountries" size="5" multiple="true"></select></p> 
  
<script type="text/javascript">
    var viewModel = {
        availableCountries: ko.observableArray(['France', 'Germany', 'Spain']) // These are the initial options 
    };

    // ... then later ... 
    viewModel.availableCountries.push('China'); // Adds another option
    ko.applyBindings(viewModel);
</script>

（3）、使用JavaScript对象来作为下拉列表的内容

<script type="text/javascript" src="knockout-2.2.0.js"></script>

<p> 
    Your country:  
    <select data-bind="options: availableCountries, optionsText: 'countryName', value: selectedCountry, optionsCaption: 'Choose...'"></select> 
</p> 
  
<div data-bind="visible: selectedCountry"> <!-- Appears when you select something --> 
    You have chosen a country with population  
    <span data-bind="text: selectedCountry() ? selectedCountry().countryPopulation : 'unknown'"></span>. 
</div> 
  
<script type="text/javascript">
    // Constructor for an object with two properties 
    var Country = function (name, population) {
        this.countryName = name;
        this.countryPopulation = population;
    };

    var viewModel = {
        availableCountries: ko.observableArray([
            new Country("UK", 65000000),
            new Country("USA", 320000000),
            new Country("Sweden", 29000000)
        ]),
        selectedCountry: ko.observable() // Nothing selected by default 
    };
    ko.applyBindings(viewModel);
</script>

十、selectedOptions binding

实现多选列表框的默认选中，例：

<script type="text/javascript" src="knockout-2.2.0.js"></script>

<p> 
    Choose some countries you'd like to visit:  
    <select data-bind="options: availableCountries, selectedOptions: chosenCountries" size="5" multiple="true"></select> 
</p> 
  
<script type="text/javascript">
    var viewModel = {
        availableCountries: ko.observableArray(['France', 'Germany', 'Spain']),
        chosenCountries: ko.observableArray(['Germany']) // Initially, only Germany is selected 
    };

    // ... then later ... 
    viewModel.chosenCountries.push('France'); // Now France is selected too
    ko.applyBindings(viewModel);
</script>