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);
    };


先到这里吧 下次再说..

 

Knockout js类库学习笔记(一)数据绑定,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。