Saturday, March 19, 2022

Knockout based Counter Version 5 (Erroneous)


Code

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Sample-Counter</title>
    <meta charset="utf-8" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://knockoutjs.com/downloads/knockout-3.5.1.js"></script>
    <style>
        .text-highlighter {
            padding: 20px;
        }
    </style>
</head>

<body>
    <div>
        <div data-bind="template: { name: 'counterTemplate', 
        data: count, 
        afterRender: function() { 
            setTimeout( function() {}, 1000 )
        } }"> </div>
    </div>

    <script type="text/html" id="counterTemplate">
        <h1 data-bind="text: $data"  class="text-highlighter" ></h1>
    </script>

    <button data-bind="click: startIncrementer">Start</button>
    </div>
    <script>
        function ItemViewModel() {
            var self = this;
            this.count = ko.observable(0);

            this.incrementer = function () {
                self.count(self.count() + self.increment());
            }

            this.increment = ko.observable(1)

            this.startIncrementer = function () {
                for (var i = 0; i < 20; i++) {
                    setTimeout(this.incrementer, (self.increment() * 1000))
                }
            }
        }
        var viewModel = new ItemViewModel();
        ko.applyBindings(viewModel);
    </script>
</body>
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)