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

你对jquery的$ container的语法和使用以及'.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'文本框，在一个span中显示名字，在一个计算中使用它，有订阅者，并在另一个绑定中使用name（）。length进行计算。

也就是说，如果您使用淘汰赛的调试版本，您可以看到您的observable具有_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

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

Click binding to parent function in foreach

KnockoutJs：从模型实例中获取绑定元素

5 个答案: