knockout.js框架 实用用法
这个可以作为knockout.js框架初体验文中，一个中文翻译的补充，因为那个翻译是当时较早版本的，其中有很多内容得到了更新；
下面是我在官网学习到的一些中文比较常用的属性：
一. foreach遍历绑定
下面是一个例子：
<script>
var viewModel = {
categories: ko.observableArray([
{ name: 'Fruit', items: [ 'Apple', 'Orange', 'Banana' ] },
{ name: 'Vegetables', items: [ 'Celery', 'Corn', 'Spinach' ] }
])
};
ko.applyBindings(viewModel);
</script>
a. $data 便利当前对象
<ul data-bind="foreach: categories">
<li data-bind="text:$data.name">
</li>
</ul>
foreach: categories表示遍历viewModel的categories对象中的数组内容，$data就代表viewModel.categories，所以$data.name遍历出来的就是name的属性
效果：
Fruit
Vegetables
b. $index 便利的index下标值
<ul data-bind="foreach: categories">
<li data-bind="text:$index">
</li>
</ul>
$index表示遍历的是viewModel的categories对象中的数组内容中的下标值1，2，3这种，类似jquery遍历的index
c. $parents 上一层元素
<ul data-bind="foreach: categories">
<li data-bind="text:$parents">
</li>
</ul>
$parents表示遍历的上一层对象，遍历的当前对象是viewModel的categories，所以$parents就表示viewModel对象
$parents[n] 上n层
d. $root 根部
这个表示不管在其中嵌套几层，都是引用根部对象viewModel
e. $element 节点元素
这个表示遍历当前的节点dom，是一个dom节点内容
<li data-bind="text:$index"></li>
f. as 一个很好的用法
看例子：
<ul data-bind="foreach: { data: categories, as: 'category'}">
<li>
<ul data-bind="foreach: { data: items, as: 'item'}">
<li>
<span data-bind="text: categories.name"></span>:<span data-bind="text: items"></span>
</li>
</ul>
</li>
</ul>
这个用于双重遍历非常好，as表示一个代替作用：
foreach: { data: categories, as: 'category' }表示需要遍历viewModel的categories这个对象，并且用category代替下面使用中的$data,
foreach: { data: items, as: 'item' }这个表示遍历viewModel的categories这个对象中的items对象，并且用item代替下面使用中的$data，
这样就不会弄混两个$data同时在一个双重遍历中的使用了
g. foreach另外一种简便的用法
<ul>
<li class="header">Header item</li>
<!-- ko foreach: myItems -->
<li>Item <span data-bind="text: $data"></span></li>
<!-- /ko -->
</ul>
<script type="text/javascript">
ko.applyBindings({
myItems: [ 'A', 'B', 'C' ]
});
</script>
ps:其实这种用非常实用，不仅仅是简便，当我们需要便利其中部分li的时候，就只能使用这种用法了，看看这个例子就知道，如果没有简便方法，就只能
<ul>
<li class="header">Header item</li>
<ul data-bind="foreach: myItems ">//这里就需要多增加一层ul结构
<li>Item <span data-bind="text: $data"></span></li>
</ul>
</ul>
h. 一些触发事件callbacks
afterRender
afterAdd 添加foreach数组中内容后触发
beforeRemove 删除foreach数组中内容触发
beforeMove
afterMove
一个例子：
</script>
当foreach的myItems数组内容增加时触发afterAdd事件，运行yellowFadeIn函数
http://knockoutjs.com/examples/animatedTransitions.html 这个是官网的一个例子。
详细了解可以直接看官网：
http://knockoutjs.com/documentation/foreach-binding.html
二 . if ；notif
这个属性不难，但是很实用
<div data-bind="if: kk ">Here is a message. Astonishing.</div>
if: kk (kk 为true 则显示，为false则不显示)
这个就是更加kk这个的值来判断这个dom是否显示。
例子：
<ul data-bind="foreach: planets">
<li>
Planet: <b data-bind="text: name"> </b>
<div data-bind="if: capital">
Capital: <b data-bind="text: capital.cityName"> </b>
</div>
</li>
</ul>
<script>
ko.applyBindings({
planets: [
{ name: 'Mercury', capital: null },
{ name: 'Earth', capital: { cityName: 'Barnsley' } }
]
});
</script>
一个很简化的用法：
<ul>
<li>This item always appears</li>
<!-- ko if: true -->
<li>I want to make this item present/absent dynamically</li>
<!-- /ko -->
</ul>
<!-- ko if: true -->显示下面li中的内容，这个如果改为<!-- ko if: false -->就不显示下面这个li中的内容
notif属性和if是完全相反的，引用一个参数结合使用：
<ul>
<li>This item always appears</li>
<!-- ko if: true -->
<li>我显示下面的就不显示</li>
<!-- /ko -->
<!-- ko notif: true -->
<li>我显示上面的就不显示</li>
<!-- /ko -->
</ul>
这样能省掉很多代码
三. with 定位作用
例子：
<h1 data-bind="text: city"> </h1>
<p data-bind="with: coords">
Latitude: <span data-bind="text: latitude"> </span>,
Longitude: <span data-bind="text: longitude"> </span>
</p>
<script type="text/javascript">
ko.applyBindings({
city: "London",
coords: {
latitude: 51.5001524,
longitude: -0.1262362
}
});
</script>
with定位到coords对象上面，下面绑定的就是coords的内容
内容引用：http://hi.baidu.com/tang_guangyao/item/76c7dfa6b8cd39d715329bb1
其他内容请见Knockout.js 官网