javascript - 获取点击事件的绑定(bind)数据

Question

这是我的 Razor 页面，包含多个 div，每个 div 包含带有 NeighbourhoodName 和其他内容的关注或取消关注按钮。

 <p class="lead" style="display: none" data-bind="visible: profiles().length == 0">No neighbourhood found...</p>
 <ul data-bind="visible: profiles().length > 0, foreach: profiles">
 <li class="media" style="border-top: solid 1px lightgrey; padding-top: 15px;">    
    <div class="media-body">
        <h4 class="media-heading">
            <a class="btn pull-right" data-bind="visible: !IsFollowed, attr: { href: followAction }">Follow</a>
            <a class="btn btn-danger pull-right" data-bind="visible: IsFollowed, attr: { href: unfollowAction }">Unfollow</a>
        </h4>
        <em data-bind="text: NeighbourhoodName"></em>
        <em data-bind="text: NeighbourhoodId"></em>

    //stuck at this line
        <a href="/Neighbourhood/NeighbourhoodDetail/@Neig"> </a>
    </div>
</li>

我想通过单击任何 div 来生成一个新页面。因此，我想通过单击相应的 div 将邻居的 id 发送到操作方法。现在，我能够通过数据绑定(bind)属性获取 NeighbourhoodId，但不知道如何通过单击 div 的任何区域将此 id 发送到操作方法意味着如何混合此 anchor 标记。类似的事情。

这是我在 knockout 码中的关注操作网址，它在点击关注按钮时发送 neighbourhoodId:

 self.followAction = location.protocol + "//" + location.host + '/Neighbourhood/Follow?uid=' + data.NeighbourhoodId;

但是，我不需要任何按钮。简单地点击 div 应该将 id 发送到操作方法。如何实现这一点。请给我推荐一些东西。

Answer 1

您只需使用 click binding在 div 上，并将其绑定(bind)到 View 模型中的函数。

View 模型中的函数接收绑定(bind)元素中可用的 knockout 上下文作为参数。因此，您可以直接从该函数访问所需的数据。

<div class="media-body" data-bind="click: yourViewModelFunction">

在你的 View 模型中，你的函数应该像这样实现:

yourViewModelFunction = function(data) {
  // here you can use data.NeighbourhoodId
}