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

您对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

为什么不在你的内部移动click事件绑定foreach？

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

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

编辑:

对不起,但我想我错过了你问题的核心:

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