- What is Knockout?
Knockout is a JavaScript library that helps to create rich, responsive display and editor user interfaces with a clean underlying data model.
It is a JavaScript implementation of the Model-View-ViewModel pattern with templates.
MVVM: Model-View-ViewModel:
* Model - Objects in Business domain
* View - User interface that is visible to the user
* View Model - code representing data on a UI
Knockout is not a replacement for other JavaScript frameworks, it is complementary to it.
Knockout works on 3 areas when developing a web pages:
* HTML
* JavaScript, and
* CSS
You need a reference to a Knockout library in your web page, either downloaded to your local project or referenced somewhere on the Internet.
Just bear in mind that Knockout keeps on evolving, so you need to make sure you have the latest Knockout libraries.
At the time of writing this blog post, the latest release is V 3.3.0 and it can be downloaded or referenced here: http://knockoutjs.com/downloads/knockout-3.3.0.js
- Tools to check or write Knockout code
JSFIDDLE
To test some Knockout code, just navigate to JSFIDDLE and start using the tool to create HTML, JavaScript and CSS code and to see the result of the code.
You need to setup a reference to the Knockout libraries, by clicking on: Add Resources and then copying the above url and then clicking the plus (+) sign to add it, before start writing some Knockout code.
See the basic layout of the JSFiddle website below:
Use of code Editor like Visual Studio
You can also use a normal Text Editor to create websites!
- Short tutorial by using a text editor
Create a basic web page with some Knockout functionality, by using a plain text editor.
* Create a folder to host your example: c:\KnockoutTest
* Create a file and call it: index.html and open it up in a text editor of your choice
* Create the basic HTML code
* Add the reference to the Knockout library to your header section
* Add the HTML code in between the <body> tags
* Add a <script> block just before the end </body> tag
* Add the Knockout code between above script block
* Save the file, and
* Run the file by double clicking on it in Windows explorer
* See code below:
<!DOCTYPE html>
<html>
<head>
<title>Knockout Example</title>
<meta charset="utf-8" />
<script src="http://knockoutjs.com/downloads/knockout-3.3.0.js"></script>
</head>
<body>
<p>First name: <input/></p>
<p>Last name: <input/></p>
<button>Show</button>
<p></p>
<script>
(function () {
function AppViewModel() {
}
ko.applyBindings(new AppViewModel());
}());
</script>
</body>
</html>
* When running the above in a Web browser, it does not do much:
* Now, let us add some Knockout code to the ViewModel:
<script>
(function () {
function AppViewModel() {
this.firstName = ko.observable();
this.lastName = ko.observable();
this.msg = ko.observable();
this.writeMsg = function () {
var p1 = this.firstName() + " " + this.lastName();
this.msg("Hello " + p1);
};
}
ko.applyBindings(new AppViewModel());
}());
</script>
* Still, not much will be happening when refreshing the page in the browser
* Let us bind the Knockout properties to the html in the view and see the action:
<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>
<button data-bind="click: writeMsg">Show</button>
<p data-bind="text: msg"></p>
* See the complete code below:
<!DOCTYPE html>
<html>
<head>
<title>Knockout Example</title>
<meta charset="utf-8" />
<script src="http://knockoutjs.com/downloads/knockout-3.3.0.js"></script>
</head>
<body>
<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>
<button data-bind="click: writeMsg">Show</button>
<p data-bind="text: msg"></p>
<script>
(function () {
function AppViewModel() {
this.firstName = ko.observable();
this.lastName = ko.observable();
this.msg = ko.observable();
this.writeMsg = function () {
var p1 = this.firstName() + " " + this.lastName();
this.msg("Hello " + p1);
};
}
// Activates knockout.js
ko.applyBindings(new AppViewModel());
}());
</script>
</body>
</html>
- Some references to check out
No comments:
Post a Comment