如何将 DOM 元素绑定到 KnockoutJS 中的特定对象？答案

【问题标题】：How do I get DOM element bound to specific object in KnockoutJS?如何将 DOM 元素绑定到 KnockoutJS 中的特定对象？
【发布时间】：2013-01-09 22:32:56
【问题描述】：

我有一个可观察数组，绑定到 contenteditable div 列表。我有一个“添加”按钮。单击时，我将一个对象添加到数组中，并希望将焦点放在相应的 div 上。

<ul id='list' data-bind="foreach: array">
  <li>
    <div contenteditable="true" data-bind="text: $data.text"></div>
  </li>
</ul>
<div id="add">+</div>

javascript

var viewModel = {
  array: ko.observableArray([])
};

ko.applyBindings(viewModel, document.getElementById('list'));

document.getElementById('add').onclick = function (evt) {
  var newObject = {text : ''};
  viewModel.array.push(newObject);
  // give focus to the newly created div
};

可以获得具有DOM元素ko.dataFor(dom)的可观察数据。如何通过数据获取 DOM？

http://jsfiddle.net/5rxdZ/

谢谢

【问题讨论】：

标签： knockout.js

【解决方案1】：

您无法从数据本身获取 DOM 元素。不过，在这种情况下，您可以使用 hasfocus 绑定将焦点移至新元素。文档在这里：http://knockoutjs.com/documentation/hasfocus-binding.html

即使只是将hasfocus: true 放在新元素上也可以解决问题。

否则，如果您不希望将焦点应用于最初呈现的元素，那么您可以为新创建的元素传入一个标志，例如：

<ul id='list' data-bind="foreach: array">
  <li>
    <div contenteditable="true" data-bind="hasfocus: $data.focused, text: $data.text"></div>
  </li>
</ul>
<div id="add">+</div>

查看模型：

var newObject = {text : '', focused: true};
viewModel.array.push(newObject);

示例：http://jsfiddle.net/rniemeyer/jnHK8/

【讨论】：

谢谢。虽然我可以通过 dom 获取数据非常令人沮丧，但反之则不然