IT资讯 |  编程 |  数据库 |  安全 |  系统 |  服务器 |  嵌入式 |  设计 |  基础 |  组网 |  QQ | 

Knockout学习之表单绑定器(上)

作者:y-z-f  发布日期:2014-07-01 19:26:30
  • 收藏本文    我要投稿
  • 表单绑定器

     

    “click”绑定

    Click 绑定器可以将javascript函数绑定到指定的dom元素,并且再该元素被点击时将触发绑定的函数,大多数情况下都会使用button、input和a元素,当然其他可见的dom元素也是一样可以的。下面我们就简单的举一个例子:

     1 <div>
     2     你已经点击了<span data-bind='text:numberOfClicks' ></span>
     3     <button data-bind='click: incremmentClickCounter'>点击</button>
     4 </div>
     5 
     6 <script type='text/javascript'>
     7 
     8     var appViewModel = {
     9         numberOfClicks: ko.observable(0),
    10         incremmentClickCounter: function () {
    11             var t = this.numberOfClicks();
    12             this.numberOfClicks(t + 1);
    13         }
    14     }
    15 
    16     ko.applyBindings(appViewModel);
    17 </script>

     

    每次点击按钮,都可以发现对应的数值在不断的递增,当然还有就是在foreach绑定下,使用$parent.xxxxx指定click绑定的函数时,将会把当前这条数据作为第一个参数传递给指定的函数,比如下面我们可以通过这种方式来删除数据:

     1 <ul data-bind='foreach:places' >
     2     <li>
     3         <span data-bind='text:$data' ></span>
     4         <button data-bind='click: $parent.removePlace'>删除</button>
     5     </li>
     6 </ul>
     7 
     8 <script type='text/javascript'>
     9 
    10     var appViewModel = function(){
    11         var self = this;
    12         this.places = ko.observableArray(['London','Paris','Tokyo']);
    13         this.removePlace = function (data) {
    14             self.places.remove(data);
    15         }
    16     }
    17 
    18     ko.applyBindings(new appViewModel());
    19 </script>

    通过点击删除按钮,将可以删除对应的项。学过监控数组的还知道另一个方法,就是可以不删除数据,但是会为这条数据设置标记,同时在foreach中也不会显示,主要是方面我们与服务器端进行同步。

     

    具备一定javascript基础的读者应该知道事件还会传递一个event参数,而这个参数包含了事件更多具体的参数,当然我们在ko下一样可以使用,比如我们将上面的代码改写。只有按下shift并点击才可以删除:

    1     var appViewModel = function(){
    2         var self = this;
    3         this.places = ko.observableArray(['London','Paris','Tokyo']);
    4         this.removePlace = function (data, event) {
    5             if (event.shiftKey)
    6                 self.places.remove(data);
    7         }
    8 }

     

    现在我们只有通过按下shift并点击删除才可以删除这条数据了。

     

    如果你需要更多的参数那么你可以写成如下所示的方式:

    1 <button data-bind='click: function(data, event) { myFunction('param1', 'param2', data, event) }'>
    2     点击
    3 </button>

     

    这样当点击这个按钮之后,将会指定myFunction并将param1、param2以及默认的参数传递给函数,这对于需要将一个事件按照不同的情况复用的时候很有用。

     

    提示:ko将会阻止设置了click绑定器元素的默认行为,比如a标签,如果设置了click绑定器则不会导致跳转到href所指定的页面,如果不想阻止默认行为可以在函数中返回true即可。关于冒泡事件,ko也给我们提供了解决方案,默认情况下ko不会阻止,如果我们需要阻止冒泡可以按照如下的方式设置clickBubble:

    1 <div data-bind='click: myDivHandler'>
    2     <button data-bind='click: myButtonHandler, clickBubble: false'>
    3         点我
    4     </button>
    5 </div>

     

    上面的例子,当我们点击了div内的button将不会导致div的发生点击事件。

     

    “event”绑定

    页面中不可能仅仅只存在点击事件,当然还存在其他很多事件,但是都不是很常用,所以ko就提供了一个event可以帮助我们给其他事件绑定函数,当然具体的赋值方式跟click一样,比如下面我们可以div的mouseover和mouseout绑定监听事件(事件可以自行写,没有限制):

    1     <div data-bind='event: { mouseover: enableDetails, mouseout: disableDetails }'>
    2         碰我
    3     </div>

     

    当我们的鼠标移动到上面就会导致执行enableDetails函数,当离开之后则会执行disableDetails函数,当然还可以设置其他更多的事件(keypress,mouseover,mouseout)。

     

    “submit”绑定

    顾名思义,就是用来绑定表单的提交事件的,当然这个绑定器可不是绑定在按钮上的,而是直接绑定到一个表单中。比如下面的代码:

     1 <form action='~/Views/Home/Index' data-bind='submit: formSubmit'>
     2     <input type='text' name='a' />
     3     <button type='submit'>提交</button>
     4 </form>
     5 
     6 <script type='text/javascript'>
     7 
     8     var appViewModel = function () {
     9         var self = this;
    10         this.formSubmit = function (formelement) {
    11             var t = formelement;
    12         }
    13     }
    14 
    15     ko.applyBindings(new appViewModel());
    16 </script>

     

    formSubmit中的formelement将指向该表单元素,当然ko默认会阻止表单的提交,如果需要取消这个默认行为,可以在函数中返回true即可。

     

    “enable”绑定

    顾名思义,利用这个绑定器可以控制表单元素是否启用,如果下面的代码将可以控制输入框是否可用:

     1 <input type='text' data-bind='enable:isShow' />
     2 <button type='button' data-bind='click:formSubmit' >开关</button>
     3 
     4 <script type='text/javascript'>
     5 
     6     var appViewModel = function () {
     7         var self = this;
     8         this.isShow = ko.observable(true);
     9         this.formSubmit = function () {
    10             self.isShow(!self.isShow());
    11         }
    12     }
    13 
    14     ko.applyBindings(new appViewModel());
    15 </script>

     

    输入框一开始是可以输入的,点击了按钮之后输入狂将会被禁用,基本上它的功能就这些了,另外一个就是 disable 绑定器,在满足条件时将禁用指定的标签。

     

    “value”绑定

    Value绑定器将会把你的视图模型中的属性与DOM元素中的value关联。可以使用于表单元素,如<input>、<select>和<textarea>。当用户修改了关联DOM元素中的值将会自动更新视图模型中关联的属性,相反如果你修改了视图模型中的属性,那么DOM元素中显示的值也会跟着变动。

     

    比如下面的例子:

     1 <div>
     2     <label for='username'>username:</label>
     3     <input id='username' type='text' data-bind='value: username' />
     4 </div>
     5 <div>
     6     <label for='password'>password:</label>
     7     <input id='password' type='text' data-bind='value: password' />
     8 </div>
     9 <div>
    10     <button type='button' data-bind='click: showInfo'>showInfo</button>
    11 </div>
    12 
    13     <script type='text/javascript'>
    14 
    15         var appViewModel = function () {
    16             var self = this;
    17             this.username = ko.observable('请输入');
    18             this.password = ko.observable('');
    19             this.showInfo = function () {
    20                 alert(self.username() + ':' + self.password());
    21             };
    22         }
    23 
    24         ko.applyBindings(new appViewModel());
    25 </script>

     

    如果你关联的视图模型中的属性是对象或者数组那么KO就会使用toString的值。所以建议使用字符串或者数值类型。当用户修改了文本框中的值,并转移了焦点KO才会更新视图模型(就是change事件),当然我们可以使用valueUpdate修改这一行为。

     

    valueUpdate可以接受如下的值:

    “input” :当<input>或<textarea>标签中的值改变将会更新视图模型中的值(支持IE9+)。

    “keyup” :当用户释放了一个键将会更新视图模型中的值。

    “keypress” :当用户完成一个字符输入时将更新视图模型中的值。

    “afterkeydown” :当用户按下一个键的同时将会更新视图模型中的值。

     

    比如下面的例子将可以实时的显示用户输入的值:

     1 <div>
     2     <input type='text' data-bind='value: realvalue,valueUpdate:'input'' />
     3     <label data-bind='text: realvalue'></label>
     4 </div>
     5 
     6     <script type='text/javascript'>
     7 
     8         var appViewModel = function () {
     9             var self = this;
    10             this.realvalue = ko.observable('');
    11         }
    12 
    13         ko.applyBindings(new appViewModel());
    14     </script>

     

Tag标签:表单  
  • 专题推荐