knockout绑定

控制文本和外观的指令

*visible:控制绑定元素的显示隐藏,如果绑定的值转换成布尔值为真则显示,否则display: none。(如果绑定一个函数则会执行并取返回值)

*text:控制绑定元素内部的文本内容,接收一个字符串的值作为绑定值,如果不是字符串会调用绑定的值的toString()方法。(如果绑定一个函数则会执行并取返回值)

*html:控制元素内部的HTML文本,换句话说,通过这个指令可以直接向标签内写入HTML。传参要求为字符串,若非字符串将调用toString()方法转换成字符串。

*css:控制元素的class属性,传入的值要求为字符串或者对象(或对象字面量),为字符串时将直接应用到元素的class,为对象时,对象的key为class,value为true则添加class,否则不添加。(如果绑定一个函数则会执行并取返回值)

*style:控制元素的内联式样式,要求传入一个对象,对象的key为驼峰形式的样式名,值为样式的值。(如果绑定一个函数则会执行并取返回值)

*attr:控制元素的属性,要求传入一个对象,对象的key为属性名,值为属性的值。

控制文档流的指令

*foreach:通过遍历数组数据生成DOM结构。将传递的数组的每项数据应用到绑定元素的内部内容里,并根据传入的数据重复生成相同的子节点。这个指令灵活多变,本文下方的补充小节会做详细说明,更推荐看文章头部给出的官方文档。

*if:控制绑定元素内的DOM节点是否生成,与visible指令类似,但是visible指令是通过CSS来控制节点的显隐,而if直接决定是否产生子节点。要求传入一个布尔型的值,为真则生成子节点,否则不生成子节点。可以和foreach一样,在一个KO虚拟元素上进行指令绑定。

*ifnot:作用和if指令一样,只是传入的布尔值为false时生成子节点,否则不生成。和if: !value等价。

*with:在绑定元素的内部创建新的绑定上下文(下方有介绍)。要求传入一个对象作为内部的绑定上下文。

*component:在绑定元素内部注入指定的组件,并可传入指定的参数给组件。组件是KO的另一个功能模块,将在下方补充说明里介绍。使用组件,可以提高代码的复用性。

表单控件相关的指令

*click:当绑定元素被点击时,执行传入的回调函数。回调函数可以是视图模型里的某个方法,也可以是某个对象的方法,如果是某个对象的方法,就这么调用:someObj.someFunc。值得注意的是,在回调函数中,KO会传入第一个参数为绑定上下文中的$data,第二个参数为事件对象。如果还想传入更多参数,可以使用函数字面量或者bind()方法,具体请参考click绑定。另外,click绑定默认是阻止点击事件的默认行为的,比如点击一个绑定了click指令的< a>标签,并不会发生跳转,想要不阻止默认行为,在回调函数里return true;即可。click绑定默认也是发生事件冒泡的,如果想阻止冒泡,那么应该这样传递值data-bind="click: myHandler, clickBubble: false"

*event:为指定事件绑定回调函数。要求传入一个对象(对象字面量更好),对象的key为事件名称,value为对应的回调函数。如果想传递更多的参数,用函数字面量是一个不错的办法。此外还可以类似myFunc.bind($root)。事件绑定

*submit:为< form>标签绑定submit事件的回调函数。默认传入form元素给回调函数。

*enable:控制绑定的标签是否有效。这个指令在< input>, < select>, < textarea>标签上可以产生作用。需要传入一个布尔值或者一个表达式,如果不是布尔值,则会转换成布尔值。

*disable:与enable类似,只是逻辑值相反。

*value:控制绑定元素的value值,在< input>, < textarea>, < select>标签上有作用。需要传入一个字符串,如果不是字符串,将会转换成字符串。此外还可以传递一些其它的配置项,比如valueUpdate的回调函数等。详见value绑定

*textInput:与value指令类似,但是textInput提供双向的数据绑定,意思即value指令只会将绑定的值付给绑定元素的value,但是当输入框的值发生变化时,视图模型的值不能同步更新。这时就需要用textInput指令,实现数据的双向绑定。

*hasFocus:控制绑定元素的focus状态。为true则绑定元素处于focus状态。这也是一个双向绑定的指令。

*checked:控制绑定元素的checked状态,对于radio, checkbox有效。传入的参数如果为布尔值,则true为选中状态,false不选中。如果传入一个数组,则根据当前绑定元素的value和数组进行匹配,如果存在于数组中则为选中状态,否则就是没选中。还可以参考文档看其它配置项。

*options:绑定在< select>标签上,生成select标签内的options,要求传入一个数组。还可以参考文档看其它配置项。

*selectedOptions:绑定在< select>标签上,决定被选中的option。要求传入一个数组。

*uniqueName:一般不会用到,为绑定的标签添加独一无二的name属性,传入的值为true就添加。

猜你喜欢

转载自blog.csdn.net/qq_42099419/article/details/84754720