Knockout中Click函数内访问$(this)实现DOM操作的可行性

你说得没错，在Knockout的click绑定函数里直接打印this，拿到的确实是ViewModel的$data——这是Knockout的默认行为，它会把绑定上下文设置为ViewModel，方便你直接操作数据。

但如果就是想用jQuery操作触发点击的那个div，完全可行！关键是要利用Knockout给click绑定函数传递的第二个参数：事件对象。通过这个事件对象的currentTarget属性（或者target，不过currentTarget更准确，因为它指向的是绑定了click事件的那个元素），你就能拿到对应的DOM节点，再用jQuery包装它就行。

修正后的内联绑定示例 #

把你的代码改成这样就可以正常隐藏div了：

<div 
  data-bind="click: function(data, event){ $(event.currentTarget).hide() }" 
  class="alert alert-secondary alert-dismissible fade show" 
  role="alert"
>
  some text here
</div>

这里的data就是你之前看到的this（ViewModel实例），event是原生的DOM事件对象，event.currentTarget就是当前被点击的div元素。

更推荐的ViewModel函数写法 #

如果你的逻辑比较复杂，把点击处理函数写到ViewModel里会更清晰，同样要接收data和event两个参数：

function MyViewModel() {
  var self = this;
  
  self.toggleAlert = function(data, event) {
    // 这里的data是ViewModel的$data，event是事件对象
    $(event.currentTarget).toggle(); // 用toggle也完全没问题
  };
}

ko.applyBindings(new MyViewModel());

对应的HTML绑定就简化成：

<div 
  data-bind="click: toggleAlert" 
  class="alert alert-secondary alert-dismissible fade show" 
  role="alert"
>
  some text here
</div>

小提醒 #

• 尽量优先用Knockout的数据驱动方式（比如绑定一个visible observable来控制显示隐藏），这更符合MVVM的设计思想，但如果确实需要直接操作DOM（比如一些复杂的动画效果），上面的方法完全可行。
• 注意区分event.target和event.currentTarget：如果div里面还有子元素，点击子元素时target会是子元素，而currentTarget始终是绑定了click的那个div，所以用currentTarget更稳妥。

内容的提问来源于stack exchange，提问作者alwaysVBNET