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来存储数据。