Question

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

如果我这样做的话：

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

我得到了我的viewmodel的$data。

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

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

Answer 1

是否可以访问$（this）并在Knockout中执行hide（）或toggle（）此div之类的操作？

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

任何jQuery代码（超出$.ajax()实用程序函数）和任何其他执行DOM交互的代码（修改，遍历，事件处理，样式更改）应该完全不在viewmodel 和

您的viewmodel管理应用程序的状态，而非外观。

管理应用程序外观的方法是通过绑定 viewmodel属性来查看属性。

视图应完全依赖于viewmodel，但viewmodel应该对视图没有依赖性。

在viewmodel中添加调用jQuery .hide()的代码会向viewmodel中的视图引入依赖关系。假设您更改了视图，.hide()不再是正确的做法。现在您还必须更改viewmodel - 不添加任何实际功能。

在视图中添加调用jQuery .hide()的代码会使viewmodel中的状态在显示内容中发生变化。你无法控制viewmodel的外观，并逐渐被迫添加更多这样的黑客。

使用现有绑定（绑定所有基本交互，如显示或隐藏元素，添加事件处理程序，与表单元素交互）或write new bindings用于特殊行为。

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

一个viewmodel属性，用于跟踪项目是否应该可见

设置此属性的函数

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>

Answer 2

在视图模型上处理逻辑而不是使标记混乱几乎总是更好，但是，您可以使用＆＃34; $ element＆＃34;来访问该元素。而不是＆＃34;这个＆＃34;。有关应该如何完成的更好示例，请参阅Tomalak的优秀答案。

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

Answer 3

也许您可以通过event并访问event.target并执行event.target.hide()。通常，通过将this分配给其他变量

来处理这种情况

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

在Click功能中访问'this'

3 个答案: