在 Click 函数中访问 'this'

Question

是否可以访问 $(this) 并在 Knockout 中执行 hide() 或 toggle() 此 div 等操作？我正在尝试通过 jQuery 访问它。感谢函数中的任何替代方法。

目前如果我这样做：

click: function(){ console.log(this) }

我得到了我的视图模型的 $data。

我知道通过击倒模型处理此动作的其他方法，但我想知道这是否可能？

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

Answer 1

也许您可以通过 event 并访问 event.target 并在其上执行 event.target.hide()。通常这种情况是通过将 this 分配给其他变量

来处理的

function sample(){
    var _this = this;
    function(){
        console.log(_this,this); // both are accessible here
    }
}

Answer 2

在视图模型上处理逻辑而不是弄乱标记几乎总是更好，但是，您可以使用“$element”而不是 "this" 访问元素。有关如何应该完成事情的更好示例，请参阅 Tomalak 的出色回答。

data-bind="click: function(){ $($element).hide() }"

Answer 3

Is it possible to access $(this) and perform actions such as hide() or toggle() this div in Knockout?

是的，但你不应该那样做。

任何 jQuery 代码（$.ajax() 实用函数之外）和任何其他进行 DOM 交互（修改、遍历、事件处理、样式更改）的代码应该完全排除在外您的视图模型和您的视图。

您的视图模型管理应用程序的状态，而不是其外观。
管理应用程序外观的方法是通过绑定视图模型属性来查看属性。
视图应完全依赖于视图模型，但视图模型对视图的依赖性应为零。
- 在视图模型中添加调用 jQuery .hide() 的代码会在视图模型中引入对视图的依赖性。假设您改变了看法，.hide() 不再是正确的做法。现在您还必须更改视图模型 - 无需添加任何实际功能。
- 在视图中添加调用 jQuery .hide() 的代码会使 viewmodel 内的状态在黑暗中关于事物显示方式的变化。你失去了对视图模型外观的控制，并逐渐被迫添加更多这样的 hack。
使用现有的绑定（有所有基本交互的绑定，如显示或隐藏元素、添加事件处理程序、与表单元素交互）或 write new bindings 用于特殊行为。

所以在你的情况下，你需要的是

跟踪项目是否可见的视图模型属性
一个函数来设置这个属性
visible binding

在对话框的情况下，我们称其为属性 isVisible 并让它默认为 true。

视图模型：

function Alert() {
    var self = this;

    self.isVisible = ko.observable(true);
    self.message = ko.observable("some text here");
    self.dismiss = function () { self.isVisible(false); };
}

视图，为便于阅读而换行：

<div
  data-bind="
    text: message,
    click: dismiss,
    visible: isVisible,
    text: message
  "
  class="alert alert-secondary alert-dismissible fade show"
  role="alert"
></div>

在 Click 函数中访问 'this'

Access 'this' within Click function

javascript

knockout.js

knockout-3.4