Knockout js class library learning notes (1) Data Binding

Source: Internet
Author: User

KnockoutJS is a common JS framework. It aims to reduce the complexity and difficulty in understanding the operation code caused by a large number of DOM operations when developers use JavaScript or JQuery, and facilitate the separation of data from HTML, the development efficiency can be improved on the premise that everyone in the team agrees with this framework.

I have recently started using this framework and have recorded General Usage experiences for future reference. If we can help you solve some of your own problems, it is beyond our expectation. :)

All for download, API reference, examples are in this http://knockoutjs.com/

First introduce the Knockout file knockout-3.0.0.js and knockout. mapping. min. js two necessary files, Knockout can run independently of the JQuery class library, So Jquery class library is not a necessary condition.

The most powerful and commonly used tool for Knockout is TwoWay-binding, which is suitable for any scenario where data needs to be bound. It is easy to use. There are multiple examples to illustrate some common binding

HTML (to ensure reuse, This is the HTML shared by all code ):

        <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>        

Note that js should be changed to its own path.

Example 1:

Simple observable binding

    var TestModel = {};    TestModel.FirstName = ko.observable("Arwind");    TestModel.LastName = ko.observable("Gao");    TestModel.FullName = ko.computed(function () {        return TestModel.FirstName() + " " + TestModel.LastName();    });


HTML for a simple Model class

            


The binding code needs to be added at the end of JS (this code only needs to be added at the end, and will not be repeated in the following example)

    ko.applyBindings(TestModel, document.getElementById("testDiv"));


The above code can only be executed once. If you need to change the corresponding data, such as ajax requests, resulting in multiple bindings, you need to make more judgments. For example, this Model is directly from Json data mapping, you only need to mapping the value of the model again to change the HTML side:

                    if (TestModel == undefined) {                        TestModel = ko.mapping.fromJS(girds);                        ko.applyBindings(TestModel, document.getElementById("testDiv"));                    }                    else {                        ko.mapping.fromJS(girds, {}, TestModel);                    }


Example 2:

Css binding

    


HTML

            ooo


Example 3

URL binding

HTML

Tecent


Knockout

    TestModel.Url = function () {        return "www.baidu.com";    };


Example 4

Child Model nested binding

Knockout

// With is used to bind TestModel to the submodel. subViewMode = [{Name: "Name1" },{ Name: "Name2"}]; TestModel. subViewMode2 = {Items: [{Name: "Name1" },{ Name: "Name2"}]};


HTML

                            
 
 
  • 1
  • 1


Example 5

Event binding

HTML

                        


Knockout

    TestModel.ClickTest = function () {        alert("test");    };


Example 6

Event binding with Parameters

HTML

            


Knockout

    TestModel.ClickJoinName = function (FirstName, LastName) {        alert(FirstName + "," + LastName);    };


Example 7

Simple observable counter

HTML

                        

Knockout

    TestModel.CountValue = ko.observable(0);    TestModel.ClickCount = function () {        var v = this.CountValue();        this.CountValue(v + 1);    };


Come here first ..

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.