Knockout介绍

来源：互联网发布：局域网屏幕广播软件编辑：程序博客网时间：2024/06/08 17:03

介绍：

Knockout是一个轻量级的UI类库，通过应用MVVM模式使JavaScript前端UI简单化。如果你还不了解Knockout是啥，先请看一下微软MIX11大会上的一段视频

连接地址：http://channel9.msdn.com/Events/MIX/MIX11/FRM08

或者直接运行下面的代码看看效果：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head>    <script type="text/javascript" src="http://knockoutjs.com/js/jquery-1.4.2.min.js"></script>    <script type="text/javascript" src="http://knockoutjs.com/js/jquery.tmpl.js"></script>    <script type="text/javascript" src="http://knockoutjs.com/js/knockout-1.2.1.js"></script></head><body>    Choose a ticket class:    <select data-bind="options: tickets,                        optionsCaption: 'Choose...',                       optionsText: 'name',                       value: chosenTicket">    </select>    </p>    <p data-bind="template: 'ticketTemplate'">    </p>    <script id="ticketTemplate" type="text/x-jquery-tmpl">        {{if chosenTicket}}            You have chosen <b>${ chosenTicket().name }</b>            ($${ chosenTicket().price })            <button data-bind="click: resetTicket">Clear</button>        {{/if}}</script>    <script type="text/javascript">        var viewModel = {            tickets: [                { name: "Economy", price: 199.95 },                { name: "Business", price: 449.22 },                { name: "First Class", price: 1199.99 }            ],            chosenTicket: ko.observable(),            resetTicket: function () { this.chosenTicket(null) }        };        ko.applyBindings(viewModel);    </script></body></html>

插件：
Knockout也有丰富的插件可以使用，例如：

你可以使用集成JQueryUI功能的插件来实现autoComplete功能：

<input type="text" data-bind="autocomplete : autocompleteConfig"/>

而没必要每次都要声明下面这样的代码：

$( "#inputId" ).autocomplete({            source: availableTags        });

或者如果你想用表单验证功能，你可以使用验证插件:

var myObj = ko.observable('').extend({ max: 99 });

或者

<input type="text" data-bind="value: myProp" max="99"/>

而不是每次在点击提交按钮的时候或者离开焦点的时候都去检查。

结论：

使用Knockout将极大减少JavaScript的开发量，是需要使用简单的绑定语法就可以很快速地应用到你的站点上。

赶紧开始你的快速学习征程吧！

0 0