如何將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/