美文网首页填坑之路
填坑之路:Knockout.js

填坑之路:Knockout.js

作者: 哦啦吧啦丶 | 来源:发表于2017-04-17 12:52 被阅读70次
1. applyBindings
ko.applyBindings(myViewModel, document.getElementById('someElementId'))

- 参数1:绑定view model
- 参数2:作用的容器范围
2. observable

ko.observable监控的对象都是方法(函数)。导致:如果数据添加后成了:function c(...), 表示添加数据时类型错了,切记要引用函数形式,即xx.xx();

3. 绑定
  • Visible 绑定:通过绑定一个值来确定DOM元素显示或隐藏;
  • Text 绑定:主要是让DOM元素显示参数值。(不担心html和脚本注入风险,绑定设置元素的text 值innerText和textContent);
  • html 绑定:绑定到DOM元素上,使得该元素显示的HTML值为你绑定的参数。(解析html标签,注意内容,可能会被注入,绑定设置元素的innerHtml上);
  • css 绑定:添加或删除一个或多个CSS class到DOM元素上;
  • style 绑定:添加或删除一个或多个DOM元素上的style值;
  • attr 绑定:提供了一种方式可以设置DOM元素的任何属性值;
  • foreach 绑定:循环遍历输出某个数组、集合中的内容(常用于render 列表等,上下文属性$index(索引),$parent(指向foreach的对象),$data(foreach对象的遍历的每个子对象数据),可以使用as 为foreach中的元素定义别名)
<script type="text/javascript" src="knockout-3.4.2.min.js"></script>
 
 <ul data-bind="foreach: { data: categories, as: 'category' }"> 
     <li> 
         <ul data-bind="foreach: { data: items, as: 'item' }"> 
             <li> 
                 <span data-bind="text: category.name"></span>: 
                 <span data-bind="text: item"></span> 
             </li> 
         </ul> 
     </li> 
 </ul>  

 <script>
     var viewModel = {
         categories: ko.observableArray([
             { name: 'Fruit', items: ['Apple', 'Orange', 'Banana'] },
             { name: 'Vegetables', items: ['Celery', 'Corn', 'Spinach'] }
         ])
     };
     ko.applyBindings(viewModel); 
 </script>
  • if绑定:控制某个组件动态显示,类似于visible,不过if直接控制dom节点,而visible只是修改domdisplay;
  • with绑定:重新定义上下文绑定(可以实现tab选项卡转换、以及模拟页面跳转);
  • click绑定:在DOM元素上添加事件句柄以便元素被点击的时候执行定义的JavaScript 函数(阻止冒泡:clickBubble: false);
  • event绑定:在DOM元素上添加指定的事件句柄以便元素被触发的时候执行定义的JavaScript 函数(大部分情况下是用在keypress,mouseover和mouseout上,阻止冒泡:youreventBubble: false);
  • submit绑定:在form表单上添加指定的事件句柄以便该form被提交的时候执行定义的JavaScript 函数(只能用在表单form元素上);
  • value绑定:关联DOM元素的值到view model的属性上(主要是用在表单控件<input>,<select>和<textarea>上,默认用户离开焦点后更新,若定义了valueUpdate,则将根据其指定的事件更新valueUpdate: 'afterkeydown');
  • checked绑定:获取checked的状态true false(仅用在checkbox或者radio button)

相关文章

  • 填坑之路:Knockout.js

    1. applyBindings 2. observable ko.observable监控的对象都是方法(函数)...

  • 填坑之路

    总有一点东西,用一次查一次,查一次忘一次 IE 11不兼容VUE Babel 默认只转换新的 JavaScript...

  • ReactNative填坑之路

    一.ViewPagerAndroid之坑 举个栗子, 然而在HotSaleLis这个Component里面就不能超...

  • 填坑之路:JSTL

    一、什么是JSTL JSP标准标签库(JSTL)是一个JSP标签集合,它封装了JSP应用的通用核心功能,它是apa...

  • idea 填坑之路

    1、jdk与jetty有版本匹配的问题,如果版本不匹配会出现不能识别jsp的错误。 jdk1.8匹配的jett...

  • 填坑之路漫长

    最近怎么说呢,大家都感觉要凉凉了。哪里都是个坑,只不过从这个坑里跳到了另外一个坑里。 好好的填坑,才是自己该做的。...

  • Vue填坑之路

    问题1:TypeError: Cannot read property 'minify' of undefined

  • iOS填坑之2 - 如何工具化自己的开发之路,如何深入,更加深入

    iOS填坑之2 - 如何工具化自己的开发之路,如何深入,更加深入源码地址在这里跟上一篇文章文章iOS填坑之1 - ...

  • 填坑之路(持续更新)

    文件名大小写问题 引用文件时,大小写输入错误,在windows环境下通常可以正常访问,但是安卓手机设备是linux...

  • React Native 填坑之路

    以下是我在开发过程中遇到的一些问题以及解决方法总结: 1、升级Xcode11, React Native启动报错的...

网友评论

    本文标题:填坑之路:Knockout.js

    本文链接:https://www.haomeiwen.com/subject/galtzttx.html