javascript - Knockout - 如何引用单击的元素并传入参数

Question

我试图单击一个元素并调用带有参数的函数，同时还跟踪单击了哪个元素。 Knockout 上的示例似乎是其中之一，但不是两者兼而有之。

在我的元素上，我有以下内容

data-bind="click: testFunction.bind($data, 1,2,3)"

我调用的函数定义如下

function(one, two, three, four){
    console.log("1st param: " + one);
    console.log("2nd param: " + two);
    console.log("3rd param: " + three);
    console.log("4th param: " + four);
};

输出对我来说没有任何意义

第一个参数:1 第二个参数:2 第三个参数:3 第四个参数:[对象对象]

其中第四个参数似乎是整个 View 模型。

如何才能拥有一个可以访问 $event.target 同时传递参数的点击绑定(bind)？

Answer 1

来自评论:

I want to basically do $(this).toggleClass('active') when it was clicked, in addition to doing stuff with the actual data parameter that I sent in. But I have no way of accessing $(this)

而且你不应该有办法做到这一点。 Knockout 是将 View 与 View 模型分离，使 View 自动(!)依赖于 View 模型状态。您永远不应该从 View 模型中引用您的 View ，因为这会颠倒依赖关系并最终伤害您(因为它阻碍了可重用性并锁定了应该是带有实现细节的抽象功能)

如果您有“事件”之类的状态，请在 View 模型中使用可观察值表示它:

function SomeViewmodel() {
    var self = this;

    self.isActive = ko.observable(false);
    self.toggleActive = function () {
        self.isActive( !self.isActive() );
    }
}

并通过 css 绑定(bind)在您的 View 中引用它:

<div data-bind="click: toggleActive, css: {active: isActive}">click me</div>

knockout 处理剩下的事情。这样，抽象定义(“这个东西是活跃的”)就与实现(“表示这个东西的元素具有特定的 CSS 类，因为它是活跃的”)清楚地分开了。如果您改变了对“事件”的视觉表示方式的看法，您需要修改的只是 View ，因为 View 模型不关心它。

而且您永远不需要知道被单击的元素(也不需要 jQuery 来实现它)。