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
<input type="text" data-bind="value:FirstName"></input><br/> <input type="text" data-bind="value:LastName"></input><br/> <span data-bind="text:FullName"></span>
JS最后需要添加绑定代码(这段代码只需添加在最后,仅需添加一次,之后示例不再赘述)
ko.applyBindings(TestModel, document.getElementById("testDiv"));
上面的代码只能执行一次 若需要相应数据的变化 如ajax请求导致多次绑定,需要多加判断,例如此Model直接从Json数据mapping过来,则只需再次mapping改变model的值即可改变HTML端:
if (TestModel == undefined) { TestModel = ko.mapping.fromJS(girds); ko.applyBindings(TestModel, document.getElementById("testDiv")); } else { ko.mapping.fromJS(girds, {}, TestModel); }
示例二:
css的绑定
<style> #testDiv .Selected { background-color:Red; width:50px; } .NotSelected { background-color:Yellow; width:50px; } </style>
HTML
<span data-bind="css:{Selected:FirstName()==‘Arwind2014‘, NotSelected:FirstName()!=‘Arwind2014‘}" class="NotSelected">ooo</span>
示例三
URL的绑定
HTML
<a data-bind="attr:{href:Url()}">Tecent</a>
Knockout
TestModel.Url = function () { return "www.baidu.com"; };
示例四
子Model嵌套绑定
Knockout
//with用于子model绑定 TestModel.SubViewMode = [{ Name: "Name1" }, { Name: "Name2"}]; TestModel.SubViewMode2 = { Items: [{ Name: "Name1" }, { Name: "Name2"}] };
HTML
<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>
示例五
事件绑定
HTML
<input type="button" value="TestButton" data-bind="click:ClickTest" /> <input type="button" value="TestButton2" data-bind="event:{click:ClickTest}" />
Knockout
TestModel.ClickTest = function () { alert("test"); };
示例六
带参数的事件绑定
HTML
<input type="button" value="TestButton3" data-bind="event:{click:function(data, event){ClickJoinName(‘arwind‘,‘gao‘)}}" />
Knockout
TestModel.ClickJoinName = function (FirstName, LastName) { alert(FirstName + "," + LastName); };
示例七
简单observable计数器
HTML
<input type="button" value="TestCount" data-bind ="click:ClickCount" /> <span data-bind="text:CountValue"></span>
Knockout
TestModel.CountValue = ko.observable(0); TestModel.ClickCount = function () { var v = this.CountValue(); this.CountValue(v + 1); };
先到这里吧 下次再说..
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。