点击按钮时不会调用knockoutjs函数

我有一个敲击视图模型函数，点击按钮时不会调用它。可能我错过了一些东西。我正在运行VS2010 IDE的代码。我在jsfiddle和测试相同的代码，它在那里工作，但是当我尝试从VS2010 IDE运行相同的代码，那么它不工作。任何帮助将不胜感激。谢谢点击按钮时不会调用knockoutjs函数

<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>

来源

2015-05-14 Mou

当加载DOM时必须调用ko.applyBindings。请参阅documentation。

你可以做到这一点：

把脚本块在HTML文档的底部，收盘前body
您可以留下您的脚本在head secttion和包装的调用``ko.applyBindings`在DOM就绪处理程序，如jQuery’s ready功能

如果你不使用jQuery只是移动你的脚本底部：

<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>

来源

2015-05-14 09:35:00 nemesv

我只是简单地将你的代码粘贴到我的aspx表单中并运行它。然后我发现页面中没有任何可见所以请尝试首先在您的结尾运行您的代码，并告诉我它是否按预期工作。 – Mou

这是你原来的代码中的另一个错误：脚本标签不能被自封闭（http://stackoverflow.com/questions/69913/why-dont-self-closing-script-tags-work）。因此，将您的第一个脚本元素更改为''。我也更新了这是我的回答 – nemesv

很好地注意到脚本标记。它会导致问题。非常感谢：） – Mou

点击按钮时不会调用knockoutjs函数

回答

相关问题