knockoutjs十一 value绑定

knockoutjs十一 value绑定

我自己都没有想到自己会写一个博客写到第十一篇，而且看过我博客的人也越来越多，我在这期间也学会了更多，这个系列的博客估计在十五篇左右就结束了，我准备把经常用到的都写完，还又一些更高级的就不写了，毕竟我因为离开了之前的公司，不再用这个框架了，以后可能会写一些小的demo，希望大家到时候还能捧场。

废话不多说：

 <p>Login name:
            <input data-bind="value: userName" />
        </p>
        <p>Password:
            <input type="password" data-bind="value:userPassword,valueUpdate:'keyup'" />
        </p>
         <a class="btn btn-primary" data-bind="click:getInputValues">获取输入框的值</a>
<script>
        function Model() {
            var self = this;
            self.userName = ko.observable("");
            self.userPassword = ko.observable("");


            self.getInputValues = function() {

                console.log("firstValue--" + self.firstValue());
                console.log("secondValue--" + self.secondValue);

            };
        }
        var model = new Model();
        ko.applyBindings(model);

    </script>

今天的value绑定确实使用的比较多的，因为表单中基本都是，所以需要详细介绍，这是一个简单的例子，value绑定主要用于 , 和这几个元素，而radio button 和checkbox使用checked，将会在下一次讲解。

1）value绑定的主要参数将会被设置为元素的value属性，这个值可以用jquery的val（）方法获取，而且这个值会覆盖你原有的value属性，如果你这样使用

<input value="1" data-bind="value:number"/>

这样你的value=1会被绑定覆盖。
2）valueUpdate是第二个参数，ko实在change事件的时候检测input属性的改变，但是你可以通过valueUpdate来改变检测的时机，

1. “input” - 这是当input的值改变的时候触发，但是只支持一些现代浏览器比如ie9+；

2. “keyup” - 在你松开一个按键的时候触发改变你的viewmodel

3. “keypress” - 这是当你按下一个键的时候触发，但是和keyup不同的是，如果一直按着键，他会不断重复的触发。

4. “afterkeydown” 在你按一个键同时触发（官方用的时as soon as），他在你输入的同时，异步的改变viewmodel，但是在一些手机浏览器中不支持。

3）valueAllowUnset这个只适合在select元素中使用。

<p>
    Select a country:
    <select data-bind="options: countries,
                       optionsCaption: 'Choose one...',
                       value: selectedCountry,
                       valueAllowUnset: true"></select>
</p>

<script type="text/javascript">
    var viewModel = {
        countries: ['Japan', 'Bolivia', 'New Zealand'],
        selectedCountry: ko.observable('Latvia')
    };
</script>

这个例子中，使用selectedCountry设置了一个原始选中值’Latvia’，可是在下拉选项中并没有这个值，所以ko把他重置为undefinded，那么就与’Choose one…’相匹配，就会默认选中’Choose one…’。这回在selectOption中详细讲解。

以下有几点注意

• 在使用<input type="text"/> 或者<textarea>时候，官方建议使用textInput绑定，这是一个新的绑定，在我之前使用的时候还没有。
• 使用observable和non-observable绑定的区别：

      <!-- Two-way binding. Populates textbox; syncs both ways. -->
<p>First value: <input data-bind="value: firstValue" /></p>

<!-- One-way binding. Populates textbox; syncs only from textbox to model. -->
<p>Second value: <input data-bind="value: secondValue" /></p>

<!-- No binding. Populates textbox, but doesn't react to any changes. -->
<p>Third value: <input data-bind="value: secondValue.length > 8" /></p>

<script type="text/javascript">
    var viewModel = {
        firstValue: ko.observable("hello"), // Observable
        secondValue: "hello, again"         // Not observable
    };
</script>

• 使用双向绑定，那么value和model中一个改变，另一个也会改变。但是使用的单向绑定，那么只会在初始化的时候给元素value赋值，在编辑的时候，会更新这个元素的value属性，但是当你的value属性改变的时候，model是不能检测到的，因为是一个单向绑定。如果绑定的不是一个简单的值，而是一个方法调用的结果，ko会用这个结果初始化元素的value属性，但是当在编辑表单的时候，不会改变元素的value属性，这种情况是一个一次性赋值，而不是一个能反映出改变的绑定。

今天的就讲解完了，代码托管在https://github.com/lushunming/knockoutJSDemo.git可以直接克隆。希望大家有意见可以留言，有疑问或者错误可以加我的qq1357197829和我交流。