Knockoutjs属性绑定(Bindings)之绑定语法(Binding syntax)
在之前我们对Knockoutjs属性绑定的内容作了相应的介绍，并在介绍的过程中我们应用了很多的例子来说明，在这些例子中我们经常会见到诸如：data-bind、$parent等语法，这些都是Knockoutjs为我们提供的非常强大的绑定语法，今天我们就分别来看一下吧。
一、数据绑定(data-bind syntax)
Knockoutjs的绑定系统为我们提供了非常强大且简洁的方式让我们将自己的数据和UI连接起来，我们可以非常方便的使用这个绑定语法来进行数据的展示。
下面是我们之前一直使用的绑定语法：
1 Today's message is: <span data-bind="text: myMessage"></span>
一个绑定语法由两部分组成：绑定的名字和值，他们之间使用“:”进行隔开。
一个标签中我们可以使用多个绑定（多个绑定之间可以相关也可以不相关），此时这些绑定之间使用","进行隔开，比如：
1 <!-- related bindings: valueUpdate is a parameter for value --> 2 Your value: <input data-bind="value: someValue, valueUpdate: 'afterkeydown'" /> 3 4 <!-- unrelated bindings --> 5 Cellphone: <input data-bind="value: cellphoneNumber, enable: hasCellphone" />
我们所绑定的名称是和我们注册的绑定处理程序一样的，如果我们所绑定的名称在这些处理程序中找不到，则Knockoutjs会将此绑定给忽略掉，因此，如果我们发现我们所绑定的值没有按照我们的预期显示的话，则我们首先应该要检查的是我们所绑定的名称是否写错了。
绑定语法中的值可以是单个值，也可以是一个变量，也可以是一段文字，同时也可以是一段JavaScript代码，下面的这个例子展现的就是绑定语法中值得多样性：
1 <!-- variable (usually a property of the current view model --> 2 <div data-bind="visible: shouldShowMessage">...</div> 3 4 <!-- comparison and conditional --> 5 The item is <span data-bind="text: price() > 50 ? 'expensive' : 'cheap'"></span>. 6 7 <!-- function call and comparison --> 8 <button data-bind="enable: parseAreaCode(cellphoneNumber()) != '555'">...</button> 9 10 <!-- function expression --> 11 <div data-bind="click: function (data) { myFunction('param1', data) }">...</div> 12 13 <!-- object literal (with unquoted and quoted property names) --> 14 <div data-bind="with: {emotion: 'happy', 'facial-expression': 'smile'}">...</div>
这个例子表明，该值可以是任何的JavaScript表达式，甚至在括号中使用逗号也是没有问题的。如果该值是一个对象，那么此对象的属性名称必须是一个有效的JavaScript标示符或者使用引号括起来。如果绑定值是一个无效的表达式或引用了一个未知的变量，则Knockoutjs将输出一个错误并停止处理绑定。
在使用绑定语法时，我们可以在绑定的内容中使用任意多个空格，此时可以是一个空格，可以是Tab空格，也可以是一整行空格，下面例子中的几条语法功能是一样的：
1 <!-- no spaces --> 2 <select data-bind="options:availableCountries,optionsText:'countryName',value:selectedCountry,optionsCaption:'Choose...'"></select> 3 4 <!-- some spaces --> 5 <select data-bind="options : availableCountries, optionsText : 'countryName', value : selectedCountry, optionsCaption : 'Choose...'"></select> 6 7 <!-- spaces and newlines --> 8 <select data-bind=" 9 options: availableCountries, 10 optionsText: 'countryName', 11 value: selectedCountry, 12 optionsCaption: 'Choose...'"></select>
如果我们在一个标签中绑定多个元素时，这些元素之间会互相影响的，此时我们在使用的时候要注意以下两点：
（1）、绑定执行的顺序是从左向右的。
（2）、当Model层的数据改变是，绑定到同一个标签上的值都会改变。
二、上下文绑定(Binding Context)
一个Binding Context是一个对象，在他们中保存着数据，这些数据我们又可以在我们的绑定语法中去使用。当我们使用属性绑定时，Knockoutjs会自动的创建和管理具有等级之分的Binding Context。当我们使用ko.applyBindings(viewModel)的时候，Knockoutjs就会创建root等级指向viewModel的参数。接着，如果你使用了with或者foreach时，Knockoutjs就会创建child binding context指向嵌套的View Model Data。Binding Context为我们提供了以下的属性可供我们在绑定语法中任意使用。
（1）、$parent
这个视图模型对象代表了他的父上下文，代表当前上下文的外部。在root context中，此属性还没有进行定义。例如：
1 <h1 data-bind="text: name"></h1> 2 3 <div data-bind="with: manager"> 4 <!-- Now we're inside a nested binding context --> 5 <span data-bind="text: name"></span> is the 6 manager of <span data-bind="text: $parent.name"></span> 7 </div>
（2）、$parents
此属性代表了所有的parent属性。
$parents[0]:代表的是上一个View Model，和$parent相同
$parents[1]:代表的是上上一个View Model
$parents[2]:代表的是上上上一个View Model
这样依次往下推就行了。
（3）、$root
这个是最重要的view model object在root context中，是最上层的parent content，我们也可以使用$parents[$parents.length-1]替换。
（4）、$data
代表当前的view model，如果此时在根部的话，则$data和$root是相等的。如果你不想引用一个view model的属性而想引用一个view model本身时，$data则是非常有用的：
1 <ul data-bind="foreach: ['cats', 'dogs', 'fish']"> 2 <li>The value is <span data-bind="text: $data"></span></li> 3 </ul>
（5）、$index
此属性只在foreach标签中有用，他的值是从0开始的。
（6）、$parentContext
此标签和$parent是有区别的，$parent代表的是上层的view model，$parentContext代表的是上层的具体的数据，比如引用上层的index，使用$parentContext.$index。
下面的两个标签在属性绑定时也是可以使用的，但他们并不是binding context中的一员。
（1）、$context:指向当前的binding context object
（2）、$element
这是当前属性绑定的DOM对象，如果我们想要引用当前标签的属性值的时候我们则可以使用此属性。
1 <div id="item1" data-bind="text: $element.id"></div>
