knockout.js - KnockoutJs：从模型实例中获取绑定元素

Question

是否有可能获得数据（模型）实例绑定到的相应元素（或多个元素）？

例如，我在 ViewModel 属性中存储了一组“Person”对象。

我将 ViewModel 绑定到呈现它的视图，例如：

<div class="people" data-bind="template: { foreach: people }">
    <a href="#" class="person" data-bind="text: name"></a>
</div>

然后我通过 jQuery 绑定一些事件处理程序：

$container.on('click', '.person', function(e){
    e.preventDefault();
    self.showPerson( ko.dataFor(this) );
});

在我的showPerson方法中，我会保存对模型的引用。我/可以/还保存对元素的引用，但如果我不需要，我不想这样做。

self.showPerson = function(person) {
    // can i get the corresponding element from the 'person' model?
};

有人有什么想法吗？

Answer 1

您可以简单地创建自定义绑定

    // data-bind="element: observable"
    // sets observable to element ..
    ko.bindingHandlers.element = {
        init: function(element, valueAccessor) {
            var target = valueAccessor();
            target(element);
        }
    };

在您的视图模型中，创建一个“字段”来存储元素：

person.el = ko.observable(null);

然后在你的html模板中..

<div data-bind="element: el"> .... </div>

Answer 2

您对 $container 和 jquery 的语法和使用以及 '.person' 的第二个参数对我来说是不熟悉的，但是在您的点击处理程序中，不是this被点击的元素吗？您不能也将它传递给您的 showPerson 方法吗？

$container.on('click', '.person', function(e){
    e.preventDefault();
    self.showPerson( ko.dataFor(this), this );
});

self.showPerson = function(person, element) {
    // can i get the corresponding element from the 'person' model?
};

我不知道如何获得可观察对象绑定的元素，但它可能是几个不同的元素。例如，您可以为“名称”提供一个文本框，在跨度中显示名称，在计算中使用它，拥有订阅者，并在另一个绑定中的计算中使用 name().length。

也就是说，如果您使用 knout 的调试版本，您可以看到您的 observables 具有_subscriptions可能具有您正在寻找的属性的属性。缩小版是我认为的一些单一字符。

Answer 3

为什么不移动你的点击事件绑定foreach？

<a href="#" class="person" data-bind="text: name, click: showPerson"></a>

在这种情况下，您的showPerson()函数将具有正确的数据person

编辑 ：

对不起，但我想我错过了你问题的核心：

self.showPerson = function (person, event) {
     element = event.srcElement
     ...
}

Answer 4

self.showPerson = function(data, event) {
  // event.currentTarget is the DOM element
  // $(event.currentTarget) gives the jQuery element
}

Answer 5

我认为最佳实践是直接绑定到视图模型上的函数而不是附加处理程序。

在 foreach 中单击绑定到父函数