knockoutjs function is not invoke when button clicked

Question

i have one knockout view model function which is not invoke when clicking the button. probably i am missing something. i am running the code from VS2010 IDE. i test the same code in jsfiddle and it is working there but when i try to run the same code from VS2010 IDE then it is not working. any help would be appreciated. thanks

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        #dash
        {
            max-height: 128px;
            overflow: hidden;
        }
        #dash div
        {
            border: 1px solid #de2345;
            padding: 4px;
            margin: 2px;
            line-height: 20px;
            box-sizing: border-box;
        }
        #dash div:before
        {
            content: '--> ';
        }
    </style>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"/>
    <script type="text/javascript">
        function TableModel() 
        {
            var self = this;
            self.Counter = 1;
            self.rows = ko.observableArray([]),
            self.addRow = function () {
                alert('pp');
                self.rows.push(self.Counter + ' ' + new Date());
                self.Counter++;
                setTimeout(function () {
                    self.rows.shift();
                    self.Counter--;
                }, 3000 + self.rows().length * 1000);
                return false;
            }
        }
        ko.applyBindings(new TableModel());
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <button id="button" data-bind="click: addRow" type="button">click</button>

    <div id="dash" data-bind="foreach: rows">
        <div data-bind="text:$data">
        </div>
    </div>
    </form>
</body>
</html>

nemesv · Accepted Answer · 2015-05-14T09:43:52.203

The ko.applyBindings has to be called when the DOM is loaded. See also in the documentation.

You can achieve this with:

put the script block at the bottom of your HTML document, before the closing body
you can leave your script in the head secttion and wrap the calling of the ``ko.applyBindings` in a DOM-ready handler such as jQuery’s ready function

If you are not using jQuery just move your script to the bottom:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>    
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"></script>   
</head>
<body>
    <form id="form1" runat="server">
    <button id="button" data-bind="click: addRow" type="button">click</button>

    <div id="dash" data-bind="foreach: rows">
        <div data-bind="text:$data">
        </div>
    </div>
    </form>
    <script type="text/javascript">
        function TableModel() 
        {
            var self = this;
            self.Counter = 1;
            self.rows = ko.observableArray([]),
            self.addRow = function () {
                alert('pp');
                self.rows.push(self.Counter + ' ' + new Date());
                self.Counter++;
                setTimeout(function () {
                    self.rows.shift();
                    self.Counter--;
                }, 3000 + self.rows().length * 1000);
                return false;
            }
        }
        ko.applyBindings(new TableModel());
   </script>
</body>
</html>

i just simply copy paste your code in my aspx form and run it. then i notice nothing visible in page. so please try to run your code at your end first and tell me does it working as expected. — Mou, May 14 '15 at 09:41
It was another mistake in your original code: `script` tags cannot be selfclosed (http://stackoverflow.com/questions/69913/why-dont-self-closing-script-tags-work). So change your first script element to ``. I've also updated this is my answer — nemesv, May 14 '15 at 09:44
well noticed about script tag. it causes the problem. thanks a lot :) — Mou, May 14 '15 at 09:47

knockoutjs function is not invoke when button clicked

1 Answers1