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> 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title></title>
</head>
<body>
    <div>
        <table>
            <thead>
                <tr><th>First name</th><th>Description</th></tr>
            </thead>
            <tbody data-bind="foreach: people">
                <tr>
                    <td data-bind="text: Name"></td>
                    <td data-bind="text: Description"></td>
                </tr>
            </tbody>
        </table>
    </div>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js"></script> 
    <script>
        var viewModel = function () {
            var self = this;
            this.people = ko.observableArray([]);
            this.init = function () {
                self.getPeople().done(function (result) {
                    self.people(result);

                    // now show the observableArray capabilities
                    var count = 0;
                    var intervalId = window.setInterval(function () {
                        self.people.push({
                            Name: 'kevin',
                            Description: 'is trying to show KO in a simple example.'
                        });
                        count++;
                        if (count == 10) {
                            window.clearInterval(intervalId);
                        }
                    }, 500);
                });
            };
            this.getPeople = function () {
                var test = [];
                test.push({
                    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();
            vm.init();
            ko.applyBindings(vm);
            });
        });
    </script>
</body>
</html>
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: GeeksWithBlogs.net