1

是否可以在 Knockout中访问$(this)和执行诸如此类的操作？我正在尝试通过 jQuery 访问它。赞赏函数内的任何替代方法。hide()toggle()div

目前，如果我这样做：

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>
4

3 回答 3

3

是否可以在 Knockout 中访问 $(this) 并执行诸如 hide() 或 toggle() this div 之类的操作？

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

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

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

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

  • 一个 viewmodel 属性，用于跟踪项目是否应该可见
  • 设置此属性的函数
  • 绑定_visible

在对话框的情况下，让我们调用该属性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>
于 2018-05-17T16:51:52.717 回答
2

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

data-bind="click: function(){ $($element).hide() }"
于 2018-05-17T16:48:14.493 回答
0

也许您可以通过eventand 访问event.target并执行event.target.hide()此操作。通常这种情况是通过分配this给其他一些变量来处理的

function sample(){
    var _this = this;
    function(){
        console.log(_this,this); // both are accessible here
    }
}
于 2018-05-17T16:45:23.823 回答