knockoutjs入门

Knockoutjs入门

（概念相关）
对于asp.net 后端开发人员来说我们几乎都接触过mvc框架。knockoutjs是MVVM模式对于我们来说有点陌生。
Knockout是一个轻量级的UI类库，通过应用MVVM模式使JavaScript前端UI简单化。
现在我想写的是mvc框架下的mvvm应用。
每个页面都会有一个viewmodel,它是连接服务器端和客户端的纽带。数据都会保存在viewmodel中，然后通过数据绑定来把数据显示到html。

今天讲讲knockoutjs的入门知识（主要是看着api翻译的）
Knockout有如下4大重要概念：

1. 声明式绑定 (Declarative Bindings)：使用简明易读的语法很容易地将模型(model)数据关联到DOM元素上。
2. UI界面自动刷新 (Automatic UI Refresh)：当您的模型状态(model state)改变时，您的UI界面将自动更新。
3. 依赖跟踪 (Dependency Tracking)：为转变和联合数据，在你的模型数据之间隐式建立关系。
4. 模板 (Templating)：为您的模型数据快速编写复杂的可嵌套的UI

konckoutjs优点： 不管任何时候你的数据模型更新，都会自动更新相应的内容；使用嵌套模板可以构建复杂的动态界面；纯JavaScript类库 – 兼容任何服务器端和客户端技术
如何使用Knockoutjs？
声明你的数据作为一个JavaScript 模型对象（model object），然后将DOM 元素或者模板（templates）绑定到它上面。
在knockoutjs中，每个HTML的DOM对象都是通过data-bind属性来绑定数据的。首先你需要把knockoutjs添加到页面中或者模板中（mvc4及以上自带）
开始使用ko(knockoutjs的缩写),首先你需要定义一个viewmodel;接下来需要做的是，把viewmodel的firstName和lastName两个属性绑定到HTML的DOM对象。

因为ko是MVVM模式，所以当任何绑定了某个属性的地方修改该属性值时，其它地方也会随之变化，Knockout使用js代码达到双向绑定的目的。

（demo：）
申明一个数据源：
var availableMeals = [
{ mealName: 'Standard', description: 'Dry crusts of bread', extraCost: 0 },
{ mealName: 'Premium', description: 'Fresh bread with cheese', extraCost: 9.95 },
{ mealName: 'Deluxe', description: 'Caviar and vintage Dr Pepper', extraCost: 18.50 }
];

html代码：
<h3>Meal upgrades</h3>
<p>Make your flight more bearable by selecting a meal to match your social and economic status.</p>
Chosen meal: <select data-bind="options: availableMeals,
optionsText: 'mealName'"></select>

js代码：
var viewModel = {
//我将在稍后放入代码
};

ko.applyBindings(viewModel); // Makes Knockout get to work
// 注意：ko. applyBindings需要在上述HTML之后应用才有效

页面渲染如下图：

申明一个data model 放入viewmodel内
var viewModel = {
chosenMeal: ko.observable(availableMeals[0])
};
ko.observable是KO里的一个基础概念。UI可以监控（observe）它的值并且回应它的变化。这里我们设置chosenMeal是UI可以监控已经选择的套餐，并初始化它，使用availableMeal里的第一个值作为它的默认值（例如：Standard）。

在下拉框上绑定value：
Chosen meal: <select data-bind="options: availableMeals,
optionsText: 'mealName',
value: chosenMeal"></select>
加一个价格显示：
<p>
You've chosen:
<b data-bind="text: chosenMeal().description"></b>
(price: <span data-bind='text: chosenMeal().extraCost'></span>)
</p>
将价格格式化成带有货币符号的：
function formatPrice(price) {
return price == 0 ? "Free" : "$" + price.toFixed(2);
}
(price: <span data-bind='text: formatPrice(chosenMeal().extraCost)'></span>)
效果图