knockout 初接触

下午练习写Service的时候，用VS2012新建一个空的MVC4项目，无意中看到在Scripts的目录下除了最常用的JQuery之外，还有一个Knockout的JS库。

于是上网简单的百度了下，看看这个库主要是用来做什么的，并且尝试写个简单的测试本地测试下运行效果。

Knockout是一个轻量级的UI类库，通过应用MVVM模式使JavaScript前端UI简单化。

MVVM是类似MVC的一种模式，即Model， View 和ViewModel。

从网上看了下测试代码，写了一个下拉框和清空下拉框的函数。

Choose a ticket class:
<select data-bind="options: tickets,
    optionsCaption: ‘Choose...‘,
    optionsText: ‘name‘,
    value: chosenTicket"></select>

<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script src="~/Scripts/jquery-ui-1.8.20.min.js"></script>
<script src="~/Scripts/knockout-2.1.0.js"></script>

<script id="ticketTemplate" type="text/x-jquery-tmpl">
    <button data-bind="click: resetTicket">Clear</button>
</script>

<script type="text/javascript">
    var viewMode = {
        tickets: [
        { name: "Economy", price: 199.95 },
        { name: "Business", price: 499.22 },
        { name: "Firse Class", price: 1199.99 }
        ],
        chosenTicket: ko.observable(),
        resetTicket: function () { this.chosenTicket(null)}
    };
    ko.applyBindings(viewMode);
</script>

运行之后的效果如下图，会解析viewModel中的name到下拉列表。

点击clear按钮的时候会清空下拉框。

Knockout的使用方式是用data-bind，包括数据绑定和时间绑定，在前台使用viewModel来存储数据。