- KnockoutJS by Example
- Adnan Jaswal
- 362字
- 2021-07-09 21:55:32
Creating the skeleton
We need to create the skeleton before we can start building the application features. Follow the steps given to create the skeleton. You should be familiar with these steps from the previous chapter.
Create the folder structure for development by following these steps.
- Create the
ToDoListfolder. This is the main folder that houses our to-do list application. - Add a
WebContentfolder under theToDoListfolder. This folder holds the content that gets published to the web. - Add a
javascriptfolder under theWebContentfolder. As the folder name suggests, this folder will contain all our JavaScript files. - Add
bootstrapfolder under theWebContentfolder. This folder will contain the Bootstrap files.
Now that we have the folder structure in place, let's add the files to our folders by following these steps:
- Add the Knockout library to the
javascriptfolder. - Add the JQuery library to the
javascriptfolder. - Add Bootstrap to the
bootstrapfolder. - Create the file
todolist.jsunder thejavascriptfolder. - Create the
todolist.htmlfile under theWebContentfolder.
Following these preceding steps should result in a folder structure that looks similar to this:
Now that we have created the folder structure, we can add code to our HTML and JavaScript files. Open the todolist.html file and add the following HTML code:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" />
<title>Knockout : ToDo List Example</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<script type="text/javascript" src="javascript/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="javascript/knockout-3.2.0.js"></script>
<script type="text/javascript" src="javascript/todolist.js"></script>
</head>
<body>
<div class="container">
<div class="page-header">
<h1>My ToDo List</h1>
</div>
</div>
</body>
</html>
The preceding code references the required libraries and displays a page header with the name of our application—My ToDo List. Open the todolist.js file and add the following code. This code defines our empty ToDoList module:
/* Module for ToDo List application */
var ToDoList = function () {
/* add members here */
var init = function () {
/* add code to initialize this module */
};
/* execute the init function when the DOM is ready */
$(init);
return {
/* add members that will be exposed publicly */
};
}();
View the application in the browser. It should give you a page with the page header. We are now ready to create the functionality to add and view tasks.
Let's get started and build the first feature of our to-do list application.