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

Question

我有一个可观察数组，绑定到contenteditable divs列表。我有一个'添加'按钮。单击我将一个对象添加到数组，并希望将焦点放在相应的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绑定将焦点移至新元素。 Docs here：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/