Question

我对此类代码有疑问：

  <html lang="en">
  <head>
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
<script type='text/javascript' src='knockout-3.0.0.js'></script>

     <table class="table table-striped">
              <tbody data-bind="foreach: cars">
                <tr>
                  <td data-bind="html: button"> </td>
                </tr>    
              </tbody>
            </table>


    <script> var tab = [
    {lat: 50.29655, lng: 18.65656},
    { lat: 51.29655, lng: 18.6565},
    { lat: 51.29655, lng: 19.6565},
    { lat: 50.29655, lng: 19.6565}
    ];

    var size = tab.length;

    function AppViewModel() {
        button: ko.observable();

        this.cars = ko.observableArray([
        ]);

        for (var i = 0; i < size; i++)
            {
                var buttonString = '<p><a class="btn btn-primary btn-lg" role="button" data-bind="click: position' + i + '">Show &raquo;</a></p>';
                this.cars.push({button:buttonString });
            }


    this.position0 = function() {
        alert(1);     
        }; 
    this.position1 = function() {
        alert(2);
        };      
    this.position2 = function() {
        alert(3);
        };
    this.position3 = function() {
        alert(4);
        };  
    }

    ko.applyBindings(new AppViewModel());</script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">  </script>
        <script src="js/bootstrap.min.js"></script>
      </body>
    </html>

根据“tab”的大小，“foreach”绑定生成四个按钮。然后我用“html bind”绑定它们就像按钮一样工作。但他们不工作。他们每个人都应该调用fumpntion“position0”，“position1”等，但我没有看到任何结果。

Answer 1

Knockout不会对使用html绑定创建的HTML应用绑定。要么使用按钮内容的模板，要么只是编写HTML，不要尝试动态生成方法名称：

<td><p><a class="btn btn-primary btn-lg" role="button" data-bind="click: position.bind(null, $index + i)">Show &raquo;</a></p></td>

然后

this.position=function(index) {
  // do what's appropriate based on index
};

Answer 2

我相信这样做的正确方法是

var buttonString = '<p><a class="btn btn-primary btn-lg" role="button" onclick="position' + i + '">Show &raquo;</a></p>';
 this.cars.push({button:buttonString });

因为我看到这个绑定中间的淘汰赛并不适用于新内容

Javascript，“foreach”绑定在淘汰赛中，“html”绑定按钮不起作用

2 个答案: