Question

让我们与代码交谈：

<div class="alert alert-info" role="alert" title="Shows player rankings">                
            <ul class="nav nav-pills" data-bind="foreach: userRanks">
                <!-- ko if: ($index() === 0) -->
                <li>
                    <a href="#" class="btn btn-default" title="Refresh ranks"><i class="glyphicon glyphicon-refresh"></i></a>
                </li>
                <!-- /ko -->
                <li>
                    <a href="#" data-bind="attr: { title: $data.rank}">
                        <!-- ko text: $data.username --><!-- /ko -->
                        <span class="badge" data-bind="text: $data.score"></span>
                    </a>
                </li>
                <!-- ko if: ($index() === ($parent.userRanks().length - 1)) -->
                <li class="pull-right">                        
                    <a href="javascript:void(0)" id="btnPush" class="btn btn-default" data-url="@Url.Action("PushPlayerinfo", "Home")">Update score</a>
                </li>
                <li class="pull-right" data-bind="attr: {title: $parent.currentUserName}">
                    <a href="#">You <span class="badge" data-bind="text: $parent.currentUsertotalScore"></span> / <span data-bind="text: $parent.currentUserRank"></span></a>
                </li>
                <!-- /ko -->
            </ul>
</div>

我已经注册了点击处理程序，将'btnPush'链接为：

$("#btnPush").on('click', function () {
//My code
});

只使用淘汰赛的foreach控件，虚拟元素和上下文，不知道我错过了什么，但是点击永远不会注册这个链接。内联Html onClick()虽然有效：

<a href="javascript:void(0)" onclick="pushData(this);" id="btnPush" class="btn btn-default" title="Click to persist current score" data-url="@Url.Action("PushPlayerinfo", "Home")">Update score</a>

此外，如果相同的链接在ul-container之外（foreach绑定之外），它可以正常工作。有人可以建议我吗？

Answer 1

您应该使用knockout处理click事件。在使用knockout时使用jQuery来处理DOM是一个不好的做法，如果你使用ko click绑定它也很容易。

查看文档：{{3}}

*如果您需要在ko foreach中运行一个方法，并且此方法属于VM，请记住使用$ parent或$ root键。

<ul data-bind="foreach: items">
  <li>                        
    <a data-bind="click: $parent.yourMethod()>link</a>
  </li>
</ul>

Knockout呈现链接，单击处理程序问题

1 个答案: