如何在KnockoutJS中将DOM元素绑定到特定对象？

Question

我有一个可观察的数组,绑定到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/

谢谢

Answer 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/