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