My Best Assignment: “Pure Knockoutjs”

Demo

The following are the topics I will discuss:

  1.   What is Knockoutjs?
  2.   What was my project? And how was it born?
  3.   Why did I choose knockoutjs for my project?
  4.    Screenshots of the project
  5.   How you, not me…how you will extend this project.
  6.   Creating a 100% static blog with Knockoutjs.
  7.   The future of Knockoutjs.
  8.   Let’s learn Knockoutjs.
  9.   Help me with Knockoutjs View-Models [seriously please…]

What is Knockoutjs?
Knockoutjs is a JavaScript library. It’s a framework created meant for use just like a pure JavaScript code, but has a different implementation, a better implementation, which is MVVM. For example, what would you do if you wanted to produce the HTML code dynamically, like when you want to create a customizable user interface? Using Knockoutjs, this a task of simply implementing a binding element; like for foreach. Checkout a simple implementation Here.
What was my project? And how was it born?
Our lecturer gave us an assignment. The requirements of the project were to create a primary school application with any programming language; be C++, C, Java, C#, VB, Delphi, or any other existing language, including Lisp if you wish. So, here is how I ended up using Knockoutjs: I am doing a personal project with SignalR, Knockoutjs, ASP.NET MVC, and some other technologies. And since Knockoutjs remains to be a subject to learn to me, I thought I would exploit my chances and risk doing the project in JavaScript, Knockoutjs to be precise…. The application had to do the following:

  1.  Capture student registration details
  2. Capture fee payment records
  3. Teachers on duty
  4. Subject offered in high school
  5. Class teachers
  6. Rank students in examinations
  7. Produce order of merit list per class
  8. Display the most improved student in each class and the whole school
  9. Print report cards in PDF
  10.  Generate trial balance for the school
  11.  Generate income statement

NB: This was not a final year, or end of course project. In fact, we only had two weeks to do a prototype that could demonstrate all that, because he wanted to explain a point in class using those projects [Software Development].

Why did I choose knockoutjs for my project?
⦁    Knockoutjs was part of a personal project that am currently doing
⦁    Knockoutjs has nice templates [Templating with KO observables]
⦁    I wanted to do a simple static site that could do complex tasks without the need of server side code
⦁    Is very easy to reuse already existing examples online, as it is simple to learn

Screenshots of the project

image1

image2

image3

How you, not me…how you will extend this project.
I will give the code of the whole project at the bottom, and youwill also find a link to a running demo. If you are curious to see all those functionalities running and working, you will be disappointed to find that I didn’t implement some. This is all due to time constrains. We are starting our exams very soon, and for someone like me who is always concentrating on one thing at a time, I have to stop everything, including my project so I can at least start learning for the exams, yeah, I said reading to pass exams! This is what we do in Kenya, or better said, this is what they encourage in Kenya, “PASSING EXAMS-IF YOU PASS, YOU ARE BRIGHT :: THEORY EXAMS, NO PRACTICALS”
So, that being constant, I left some things un-accomplished, like PDF functionalities, and not because they are so hard to do, it all boils from time, and priorities. Wee, if you are willing to pay me so I can finish that specifically for you, well then, you are very welcome (money and college have always been dependent on each other!!). So, if you want to return HTML pages as PDF files from the browser, completely with client side JavaScript, there is a library called jsPDF. And because I am not willing to work an example for you, I will show you screenshots how jsPDF works. I have downloaded the samples from their github repository, and its working 100%, so there is no need of re-implementing it again.

image4image5image6  image7

Creating a 100% static blog with Knockoutjs.
From my little experience with knockoutjs, am vividly convinced a question that was asked at stackoverflow can be answered. The owner of the question wanted a blog engine created with pure JavaScript (and isn’t Knockoutjs JavaScript? Of course it is…)
I don’t know why something tells me that it would be easier to edit a Knockoutjs template for github pages than using Jekyll. All you have to do, is wrap a HTML list-element with a foreach loop and everything in the Knockoutjs template gets posted on the HTML page, with the order you want. You can also implement something like a search, and many more features like sorting.
I know this is, or might sound stupid if you are an established programmer, but I know people like me, people like us, we value and respect simplicity.

Demo

Advertisements

About Kabue Charles

As a software architect, I am specialized in .NET and JavaScript. As an entrepreneur, I invest my time, money, energy and will in creating things that will make lives better. As a philosopher, I learn about happiness, people and my environment. As a poet, I write about human transcendence. As a man, I am modest moralist, a centrist, a progressive evolutionist and a man of quotable quotes

Posted on July 19, 2014, in Learning and tagged . Bookmark the permalink. Leave a comment.

Say Something....

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 )

Google+ photo

You are commenting using your Google+ 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 )

w

Connecting to %s

%d bloggers like this: