Knockout js class library learning notes (1) Data Binding

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