这里比较容易搞混的是DOM节点与ViewModel的层次对应关系。首先，在ul上应用 foreach 绑定，也就是每个 li 对应每个 people 子项。这一点对应上了之后，就按照 js 的作用域规则去理解即可。说到作用域，不得不提 this，正所谓我待this如初恋，this坑我千百遍。这里小茄在官方版本上加了个remove函数，与官方的removePeople对应起来看就简单了。至于$index, $parent这些变量，按字面意思理解即可。
交互类属性
终于要到重点了，使用ko的最重要原因就是为了处理动态交互的UI展现问题，这里集中介绍一下与表单相关的一些绑定。
（1） click绑定
语法：data-bind="click: clickHandler"，这里的clickHandler函数可以是任意函数，并不一定要是ViewModel里的函数，只要能引用到即可。关于click事件有几点需要留意的：
1. 参数传递，ko默认将当前组件作为第一个参数传给clickHandler函数，这里要注意当前的绑定上下文，比如说在with环境中，传回的组件就会变成with组件而不是你想要的当前组件。如果你还需要传递event参数，则将event作为第二个参数传入。如果还需要传入更多的参数，那么就需要使用一个函数包装起来了。如：
<button data-bind="click: function(data, event) { myFunction('param1', 'param2', data, event) }"> Click me </button>
2. 默认行为的设置（比如链接）
ko默认是禁止默认事件行为的，通常我们为链接绑定点击事件也不会是让其跳转的。不过你如果一定要开启的话，直接在clickHandler里面return true即可。
3. 冒泡
ko默认是允许冒泡的，你可以通过 data-bind="click: clickHandler, clickBubble: false"来设置click事件不冒泡。
（2）event绑定
ko提供了这个接口让用户自定义绑定事件。关于参数传递、默认行为、冒泡等与click绑定是一样的，使用案例：
<div> <div data-bind="event: { mouseover: enableDetails, mouseout: disableDetails }"> Mouse over me </div> <div data-bind="visible: detailsEnabled"> Details </div> </div> <script type="text/javascript"> var viewModel = { detailsEnabled: ko.observable(false), enableDetails: function() { this.detailsEnabled(true); }, disableDetails: function() { this.detailsEnabled(false); } }; ko.applyBindings(viewModel); </script>
（3）submit绑定
主要用来做一些验证表单的工作。ko会阻止默认的提交表单动作，并转入submit绑定的函数中。后续需要提交的时候，在绑定事件中 return true即可。
PS： 为什么不在表单中使用 click 事件来处理呢？因为 submit 本来就是被设计用来处理提交事件的，它还能接受回车一类的提交动作，但click则不行。
（4）value 与 textInput 绑定
在输入框绑定 value 和 textInput 看起来效果差不多，但是更推荐使用 textInput 事件进行绑定，因为 textInput 是新增的专门用来处理输入事件的。在上一篇文章中可以看到，使用 value 绑定时（左）输入之后必须要将焦点从输入框中移出才会进行更新，而 textInput （右）是马上进行更新的。
虽然，value 绑定也可以通过设置 data-bind="{value: price, valueUpdate: 'afterkeydown'}" 实现与 textInput 一样的效果，但是这个在浏览器中的兼容性并不如 textInput 好。
（5）options绑定（selectedOptions）