码迷,mamicode.com
首页 > 其他好文 > 详细

knockout 初接触

时间:2015-02-18 18:48:26      阅读:218      评论:0      收藏:0      [点我收藏+]

标签:

下午练习写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来存储数据。

knockout 初接触

标签:

原文地址:http://www.cnblogs.com/fengsui/p/4295858.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!