Knockout js类库学习笔记（1）数据绑定

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

先到这里吧下次再说..

1楼aa466564931昨天 21:26: :)

Knockout js类库学习笔记（1）数据绑定

相关推荐