NodeJS ?
NodeJS is Server side platform built on Google Chrome Javascript Engine. NodeJS performs like server side language in Web Developments. Paypal also using NodeJS for Back-end developments. Previously Javascripts used only on Front End Developments. But now Javascript use for Both Back-end and Front-end developments. (Source: NodeJS Tutorials)
Knockout?
Knockout is a JavaScript library that helps you to create rich, responsive display and editor user interfaces with a clean underlying data model (Source: KnockoutJS Official Website). KnockoutJS use MVVM approach and developers can bind data retrieve from back-end to DOM elements.
Data View Application with NodeJS and MySql with KnockoutJS.
Normally AngularJS and Knockout functionalities are same. But these 2 frameworks used different framework approaches. Inter-connectivity between Angular and NodeJS is easy. Basically NodeJS provide API for connect with front-end. In this development process,
- User Load Page, request will send to NodeJS Server.
- From routine mechanism on Node Server, Server will return HTML page.
- During this load Ajax Request will send to NodeJS server for retrieve data.
- NodeJS will retrieve data from Mysql Database and convert data to JSON object and send it to front-end.
- Knockout Library will read json object sent by server and bind data to page.
Development
you can check project on GitHub (
https://github.com/kitcodes/knockout-node-1)
I used public folder for css, js and image components. server folder for business logic and view folder for view data on html pages.
Mysql
I created Database (db_blog) with tbl_blog (
b_id (int, primary key),
b_title (varchar100),
b_date (date),
b_desc (varchar200))
NodeJS
Dependency NodeJS components. (Install these components using npm)
- fs
- express
- jsonfile
- body-parser
- node-mysql
I used different js file for Mysql Connection and Data Retrieve (
db.js) with OOP concepts on Javascript. for routine and data sending to front end i used different js file and it will act as a controller (
index.js).
KnockoutJS
In view folder
index.html has view for Front-End user. From knockout view model data will bind to dom tree.
| |
| var data = [];
var viewModel = { |
| blogs: ko.observableArray(data), |
| b_id: ko.observable(0), |
| |
| };
ko.applyBindings(viewModel);
|
we have to bind html selectors with knockout. I have added list view for view data.
|
| <ul data-bind="template: { foreach: blogs }">
<li> |
| <div> |
| <a data-toggle="modal" data-bind="click:viewPopupModel" data-target="#myModal"> |
| <span data-bind="text: b_title, value:b_id"></span> |
| </a> |
| </div> |
| </li> |
| </ul> |
then data will be loaded to dom tree from Ajax request.
|
|
| $.ajax({ |
| url: "http://localhost:5000/viewall", |
| type: "GET" |
| }).then(function(data, err) { |
| console.log(data); |
| viewModel.blogs(data); |
| }); |
| |
| }) |
