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