knockoutjs的某些坑总结

最近折腾一个五年前的项目，里面用了这个轻量级的mvvm框架

一堆坑，而且几乎是处于被抛弃的状态。。。这里就是记些用的过程中遇到的问题和自己的解决方法，不从深层去挖了~

具体使用方法可参考以下链接： data-bind用法监听数组

data-bind

一个元素不能写多次data-bind，即：<div data-bind="" data-bind=""></div> 解析时后面的data-bind会被直接无视；也不能一个data-bind里绑定多个属性，如：

<div data-bind="text:xxx;attr:{...}"></div>

会直接报错。所以，有时为了能绑定多个属性，必须额外写一堆没有用途的dom结构，只为了多写几个data-bind...
一个viewmodal如果是这样的结构：
```
    var viewmodal={data:ko.observable({});//data是个受监控的对象}
复制代码
```
那么视图层使用data-bind时，一定要这样写：<div data-bind="text:data().xx"></div>；而且，如果data的初始值为空，那么一定要在data-bind里做好相关判断！不然渲染时很容易出错，会影响后续原本正常的数据渲染
在 data-bind="foreach:xxx"的用法里，在这范围内的元素只能调用xxx数组里的属性；如果想要调用数组外的，记得用$parent
data-bind="click:xxx"，如果该语句在一个foreach里，该xxx函数里的this是取不到viewModal的，而是循环的每一项。如果想要调用viewModal，请直接调用：
```
var viewModal = {word:'',test:function(){viewModal.word = xxx；}
}
复制代码
```
另：而且函数入参e也不是所在元素绑定的相关属性，也是循环的每一项。

因为这个僵硬的设计，导致我不能将所有函数都放在viewModal里，有的还是得老老实实地用controller语法：
```
$('#xxx').click(function(){$('#ttt').prop('class','aaa');
})
复制代码
```
foreach生成的元素是动态的，所以在这样的元素上绑定事件，请使用$(document).on('click','xxx',function(){...})

observableArray：

我们知道一个属性被监听，重写需要这样：observedData(xxx)；数组也不例外，当然，你也可以使用改变原数组的一些方法操作，同样可被监听，如：push/pop/splice等

applyBindings

当在全局绑定数据时，js里只能出现一次该函数；如果是在不同范围内绑定，该函数想出现几次就几次
此函数必须位于代码最末尾

转载于:https://juejin.im/post/5cff5d9b518825276a286230

knockoutjs的某些坑总结相关推荐

Knockoutjs Component问题汇总
在使用KnockoutJs Component组件时,遇到的坑,让人晕头转向奶奶的,什么问题写的都没错啊! 1.Component绑定时,params:的参数应绑定属性引用不能绑定属性的值. 1)主页 ...
【golang程序包推荐分享】分享亿点点golang json操作及myJsonMarshal程序包开发的踩坑经历 :)
目录[阅读时间:约5分钟] 一.概述 1.Json的作用 2.Go官方 encoding/json 包 3. golang json的主要操作二.Json Marshal:将数据编码成json字符串 ...
java调用clang编译的so_写Java这么久，JDK源码编译过没？编译JDK源码踩坑纪实
好奇害死羊很多小伙伴们做Java开发,天天写Java代码,肯定离不开Java基础环境:JDK,毕竟我们写好的Java代码也是跑在JVM虚拟机上. 一般来说,我们学Java之前,第一步就是安装JDK环 ...
flask sqlalchemy踩坑记录
查询坑1: 查询不存在返回值不全是None 当使用first().one()等函数进行查询时,如果查询不存在,返回值为None 但是如果使用all().paginate()等函数进行查询是,如果返回 ...
mac git使用与配置踩过的坑
#mac git使用与配置踩过的坑标题mac配置git ssh密钥参考链接mac配置git ssh key go get安装失败的解决方法 go get约等于git clone+go instal ...
你需要掌握的有关.NET DateTime类型的知识点和坑位都在这里
引言 DateTime数据类型是一个复杂的问题,复杂到足以让你在编写[将日期从Web服务器返回到浏览器]简单代码时感到困惑. ASP.NET MVC 5和 Web API 2/ASP.NETCo ...
（转）面试必备技能：JDK动态代理给Spring事务埋下的坑！
一.场景分析最近做项目遇到了一个很奇怪的问题,大致的业务场景是这样的:我们首先设定两个事务,事务parent和事务child,在Controller里边同时调用这两个方法,示例代码如下: 1.场景A ...
java.lang.OutOfMemoryError：GC overhead limit exceeded填坑心得
该文章出自:http://www.cnblogs.com/hucn/p/3572384.html 分析工具:http://www.blogjava.net/jjshcc/archive/2014/03 ...
Python 常见的坑汇总
1. 列表与 * 操作 Python 中,* 操作符与 list 结合使用,实现元素复制. 复制 5 个空列表: In [1]: [[]] * 5 Out[1]: [[], [], [], [], [ ...
20150726 填坑日记
三中内填坑: 1. 组合数递推什么的 C(m,n)=C(m,n-1)+C(m-1,n-1).填了个大坑,以前没认真听课QAQ 2. 裸题过河卒 3. 缺角正方形摆放车统计,分上下部分,枚举上部分放几个 ...

knockoutjs的某些坑总结

data-bind

observableArray：

applyBindings

knockoutjs的某些坑总结相关推荐

最新文章

热门文章