Home/ Questions/Q 6613557
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T20:13:57+00:00

I’m having trouble with the click binding. I’m trying to run some sample code

  • 0

I’m having trouble with the click binding. I’m trying to run some sample code from the Knockout website, which isn’t working. The number of clicks isn’t updating. I’m not getting any javascript errors in Firefox. Can someone help?

This is the code I have:

<head runat="server">
    <script type="text/javascript" src="/Scripts/jquery-1.6.4.js"></script>
    <script type="text/javascript" src="/Scripts/jquery.tmpl.js"></script>  
    <script type="text/javascript" src="/Scripts/knockout-1.2.1.js"></script>
    <script type="text/javascript">
        var clickCounterViewModel = function () {
            this.numberOfClicks = ko.observable(0);

            this.registerClick = function () {
                this.numberOfClicks(this.numberOfClicks() + 1);
            }

            this.hasClickedTooManyTimes = ko.dependentObservable(function () {
                return this.numberOfClicks() >= 3;
            }, this);
        };

        ko.applyBindings(new clickCounterViewModel());
    </script>
</head>
<body>
<div>You've clicked <span data-bind="text: numberOfClicks">&nbsp;</span> times</div>

<button data-bind="click: registerClick, enable: !hasClickedTooManyTimes()">Click me</button>

<div data-bind="visible: hasClickedTooManyTimes">
    That's too many clicks! Please stop before you wear out your fingers.
    <button data-bind="click: function() { numberOfClicks(0) }">Reset clicks</button>
</div>

</body>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You want to move your script tag to the bottom of the document or put it in a an onload/ready function. You need at least ko.applyBindings to execute after the rest of the DOM has been loaded.

    • 0