CODEWITHSUNDEEP
jquerytemplatesknockout.js
Hoppe
Hoppe

Reputation: 6815

Click binding not working

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>

Upvotes: 0

Views: 274

Answers (1)

RP Niemeyer
RP Niemeyer

Reputation: 114792

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.

Upvotes: 2

Related Questions