博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
knockoutjs的某些坑总结
阅读量:5933 次
发布时间:2019-06-19

本文共 1274 字,大约阅读时间需要 4 分钟。

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

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

具体使用方法可参考以下链接:

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

你可能感兴趣的文章
eclipse tomcat maven热部署
查看>>
写给网页设计师的视觉设计基础手册
查看>>
Linux 笔记
查看>>
hdu1008Elevator
查看>>
Hadoop之Storm其他_pom
查看>>
windows环境Caffe安装配置步骤(无GPU)及mnist训练
查看>>
软件工程专题(摘自中国软考联盟)
查看>>
阅读作业(2)---Sheldon Peng‘s[彭笑东版]
查看>>
Python 以指定概率获取元素
查看>>
最大子序列
查看>>
Visual studio 替换使用正则表达式 查询http
查看>>
微信公众平台图文教程(二) 群发功能和素材管理
查看>>
在Excel中怎样才能在某一行前面一次插入多行?
查看>>
1073. Scientific Notation (20)
查看>>
eclipse安装SVN插件
查看>>
[翻译]帮助文档-jQuery 选择器
查看>>
objdump的使用方法和 symbol table的每列的含义
查看>>
linux 3.10的list_del
查看>>
20170521第三讲
查看>>
Opencv学习之路—Opencv下基于HOG特征的KNN算法分类训练
查看>>