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

【问题标题】：KnockoutJs: Get the bound element from a model instanceKnockoutJs：从模型实例中获取绑定元素
【发布时间】：2012-05-25 15:56:58
【问题描述】：

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

例如，我在 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?
};

有人有什么想法吗？

【问题讨论】：

标签： knockout.js

【解决方案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>

【讨论】：

这应该是答案，因为这是页面上唯一让我可以从内部视图模型访问绑定元素的解决方案，而不是在单击时，而是在绑定后立即访问.
这让它变得如此简单，并允许您创建多个可观察对象来保存对模型中多个 HTML 对象的引用。多么棒的解决方案！

【解决方案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?
};

我不知道有什么方法可以获取 observable 绑定的元素，但它可能是几个不同的元素。例如，您可以为 'name' 设置一个文本框，在 span 中显示名称，在计算中使用它，拥有订阅者，然后在另一个绑定中的计算中使用 name().length。

也就是说，如果您使用 knout 的调试版本，您可以看到您的 observable 有一个 _subscriptions 属性，它可能包含您要查找的内容。我认为缩小版是一些单一的字符。

【讨论】：

感谢您的回复。当然，最简单的方法是保存对元素的引用，但在我的问题中，我已经提到如果我不需要，我不想这样做。但我认为您的回答已经证实，无法获取可观察对象绑定到的元素列表，我觉得这是缺乏 knockoutjs 的 API 方法方法。

【解决方案3】：

为什么不在foreach 中移动点击事件绑定？

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

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

编辑：

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

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

【讨论】：

感谢您的回复，但这不是我要问的。 showPerson() 得到正确的数据。我在问是否可以从传递给showPerson() 的模型实例中获取相应的元素

【解决方案4】：

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

【讨论】：

我在问是否可以从模型中获取元素，而不是从事件处理程序参数中获取元素。

【解决方案5】：

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

Click binding to parent function in foreach

【讨论】：