knockout 你想知道的常用功能

1、绑定值

visible:

     设置可见的值:data-bind=" visible : 1==1(判断条件) "  诺为true则visble,为flase则hidden,判断条件也可以是function返回的结果,只要可以返回true 或 false 就行。 

     不要问我 0和1 自己去试 !

text:

     设置文本的值:: data-bind=" text :  值"  值可以是json传过来的,也可以是function返回的结果,也可以是比较返回的结果 ,可以用在任何元素上,要记住设置html和text的区别。

html:

    设置容器里(div之类的)代码:data-bind="html:值"  值可以是json传过来的,也可以是function返回的结果,一般function返回的较多,因为里面可以拼接代码。

css:

    设置DOM样式:data-bind=" css : { 样式类名 : true || false ...}"  诺为true则样式生效,false则失效,可以有多个样式,true或false也可以通过function。

style:

   设置属性:data-bind=" style : { ' color ' : 1>0  'red', ....  }" 跟上面相似,为true就改变值,为false则不改变,true或false可以自己想办法获取。

attr:

   设置纯属性:data-bind=" attr : { ' 属性名 ': ' 值 ' }"  一般用于设置纯属性,设置及生效,可以通过function改变着值而自动改变。

click:

   设置点击事件:data-bind="click :  事件名"  该事件名可以是函数,一般用于button、input、a上面,设置了a,a的href或自动失效,诺要有用的话则返回一个true.

event:

   类似于切换:data-bind=" event: {mouseover  : 函数名(),mouseout : 函数名()}"  一般用于mouseover  和 mouseout 上,类是于切换

value:

  值绑定:data-bind="value:data.models.对象.属性"   主要是用在表单控件<input>,<select>和<textarea>上,用于设置值

            “change”(默认值) - 当失去焦点的时候更新view model的值,或者是<select> 元素被选择的时候。

            “keyup” – 当用户敲完一个字符以后立即更新view model。

            “keypress” – 当用户正在敲一个字符但没有释放键盘的时候就立即更新view model。不像 keyup,这个更新和keydown是一样的。

            “afterkeydown” – 当用户开始输入字符的时候就更新view model。主要是捕获浏览器的keydown事件或异步handle事件。

        上述这些选项,如果你想让你的view model进行实时更新,使用“afterkeydown”是最好的选择。

  

            

           

    

     

    

2、通过ajax获得model的值替换原来model的值  可以用于修改或添加值后自动刷新

$.post( "url",

            {JSON参数}, 

             function(rlt) {   //回调函数返回的JSON对象 

            data.models.原来的model对象名(ko.mapping.fromJS(rlt.rlt)());
});

原文地址:https://www.cnblogs.com/SHZX/p/9377383.html