Geeks With Blogs

News Please visit me at my new blog!!

profile for Aligned at Stack Overflow, Q&A for professional and enthusiast programmers
"free in Christ Jesus from the law of sin and death." Romans 8:2 (ESV) Check out the Falling Plates video on YouTube.
more about the Gospel
And then listen to Francis Chan speaking at LifeLight in SD.

Programming and Learning from SD

I needed to show some developers how to use KnockoutJS instead of jQuery or MVC Razor server-side to create a table of values. I was able to show them in about 30 minutes and here is what I came up with.

See my full interactive demo at jsFiddle.Net of the code below. The jsFiddle is more likely to change than the code below.

<!DOCTYPE html> 
    <meta name="viewport" content="width=device-width" />
                <tr><th>First name</th><th>Description</th></tr>
            <tbody data-bind="foreach: people">
                    <td data-bind="text: Name"></td>
                    <td data-bind="text: Description"></td>
    <script src=""></script>
    <script src=""></script> 
        var viewModel = function () {
            var self = this;
            this.people = ko.observableArray([]);
            this.init = function () {
                self.getPeople().done(function (result) {

                    // now show the observableArray capabilities
                    var count = 0;
                    var intervalId = window.setInterval(function () {
                            Name: 'kevin',
                            Description: 'is trying to show KO in a simple example.'
                        if (count == 10) {
                    }, 500);
            this.getPeople = function () {
                var test = [];
                    Name: 'kevin',
                    Description: 'is trying'
                return $.Deferred().resolve(test);
                // in the real world, make the ajax call to get JSON
                /* return $.ajax({
                    dataType: "json",
                    url: '/api/getPeople/',

        document.addEventListener('DOMContentLoaded', function () {
            var vm = new viewModel();
Posted on Friday, October 3, 2014 4:51 PM Knockout Js | Back to top

Comments on this post: Quick KnockoutJS Example

No comments posted yet.
Your comment:
 (will show your gravatar)

Copyright © Aligned | Powered by: