Knockout js类库学习笔记（1）数据绑定
日期：2014-05-16 浏览次数：20394 次
Knockout js类库学习笔记（一）数据绑定
KnockoutJS是一个常用的JS框架，目的为减少开发者在使用JS或JQuery时大量的DOM操作所导致的操作代码复杂且难以理解，并且有助于数据与HTML的分离，在团队中大家统一认同此框架的前提下，能够提高开发效率。
本人也是最近开始使用这套框架，并且记录下一般性的使用心得，以备日后查阅。如果能够帮助大家解决一些自己的问题，实属超出预计。：）
所有关于下载，API查阅，示例均在此http://knockoutjs.com/
首先引入Knockout文件knockout-3.0.0.js和knockout.mapping.min.js两个必要文件，Knockout可以独立于JQuery类库运行，So Jquery类库不是必要条件。
Knockout最强大和最常用的工具在于双向绑定（TwoWay-binding），适用于任何需要绑定数据的场景。使用也很简单方便。这里分为多个示例讲解一些常见的binding
HTML（为保证重复利用，这是所有代码共用之HTML）：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="js/knockout/knockout-3.0.0.js" type="text/javascript"></script>
<script src="js/knockout/knockout.mapping.min.js" type="text/javascript"></script>
<script src="js/knockout/koExternalTemplateEngine_all.min.js" type="text/javascript"></script>
<script src="js/JScript1.js" type="text/javascript"></script>
<style>
#testDiv .Selected
{
background-color:Red;
width:50px;
}
.NotSelected
{
background-color:Yellow;
width:50px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id ="testDiv">
<input type="text" data-bind="value:FirstName"></input><br/>
<input type="text" data-bind="value:LastName"></input><br/>
<span data-bind="text:FullName"></span>
<span data-bind="css:{Selected:FirstName()=='Arwind2014', NotSelected:FirstName()!='Arwind2014'}" class="NotSelected">ooo</span>
<a data-bind="attr:{href:Url()}">Tecent</a>
<div>
<ul data-bind="foreach:SubViewMode;">
<li data-bind="text:Name">1</li>
</ul>
</div>
<div data-bind="with:SubViewMode2;">
<ul data-bind="foreach:Items">
<li data-bind="text:Name">1</li>
</ul>
</div>
<input type="button" value="TestButton" data-bind="click:ClickTest" />
<input type="button" value="TestButton2" data-bind="event:{click:ClickTest}" />
<input type="button" value="TestButton3" data-bind="event:{click:function(data, event){ClickJoinName('arwind','gao')}}" />
<input type="button" value="TestCount" data-bind ="click:ClickCount" />
<span data-bind="text:CountValue"></span>
</div>
</form>
</body>
注意js改为自己的路径。
示例一：
简单observable绑定
var TestModel = {};
TestModel.FirstName = ko.observable("Arwind");
TestModel.LastName = ko.observable("Gao");
TestModel.FullName = ko.computed(function () {
return TestModel.FirstName() + " " + TestModel.LastName();
});
简单的一个Model类 对应之HTML
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
