Getting Started with Knockout.JS

The instructions below can be followed to create a simple task list application in Knockout.js. Knockout.js is an open-source JavaScript web framework that implements the “MVVM” (“Model-View-ViewModel”) software pattern. It was developed by Steve Sanderson while employed at Microsoft.

These instructions are a simplified version of a tutorial hosted the URL “http://learn.knockoutjs.com”.

KnockoutJS-TaskList.png

1. In any convenient location, create a new directory named “KnockoutJS”.

2. Download the current version of Knockout.js, place it in the newly created KnockoutJS directory, and rename the file to “knockout.js”. As of this writing, the latest version is available for download at the URL “http://knockoutjs.com/downloads/index.html”.

3. Still in the KnockoutJS directory, create a new text file named “TaskList-View.html”, containing the following text.


<!-- This code is minimally adapted from a sample at the URL "http://learn.knockoutjs.com". -->

<html>
<body>

<script type="text/javascript" src="knockout.js"></script>

<h3>Tasks</h3>

<form data-bind="submit: addTask">
    Add task: <input data-bind="value: newTaskText" placeholder="What needs to be done?" />
    <button type="submit">Add</button>
</form>

<ul data-bind="foreach: tasks, visible: tasks().length > 0">
    <li>
        <input type="checkbox" data-bind="checked: isDone" />
        <input data-bind="value: title, disable: isDone" />
        <a href="#" data-bind="click: $parent.removeTask">Delete</a>
    </li> 
</ul>

You have <b data-bind="text: incompleteTasks().length"> </b> incomplete task(s)
<span data-bind="visible: incompleteTasks().length == 0"> - it's beer time!</span>

<script type="text/javascript" src="TaskList-ViewModel.js"></script>

</body>
</html>

4. Still in the KnockoutJS directory, create a new text file named “TaskList-ViewModel.js”, containing the following text.


// This code is minimally adapted from a sample at the URL 
// http://learn.knockoutjs.com 

function Task(data) {
	this.title = ko.observable(data.title);
	this.isDone = ko.observable(data.isDone);
}

function TaskListViewModel() {
	// Data
	var self = this;
	self.tasks = ko.observableArray([]);
	self.newTaskText = ko.observable();
	self.incompleteTasks = ko.computed(function() {
		return ko.utils.arrayFilter(self.tasks(), function(task) { return !task.isDone() });
	});

	// Operations
	self.addTask = function() {
		self.tasks.push(new Task({ title: this.newTaskText() }));
		self.newTaskText("");
	};
	self.removeTask = function(task) { self.tasks.remove(task) };
}

ko.applyBindings(new TaskListViewModel());

4. Open the file “TaskList.html” in a web browser that runs JavaScript. Verify that a task list interface appears, and that it works as expected.

Advertisements
This entry was posted in Uncategorized and tagged , , , , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s