Jak uzyskać powiązanie elementu DOM z konkretnym obiektem w KnockoutJS?

Question

Mam tablicę obserwowalną, związaną z listą contenteditable divs. Mam przycisk "dodaj". Po kliknięciu dodam obiekt do tablicy i chcę skupić się na odpowiednim elemencie 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 
}; 

Jest możliwe, aby uzyskać obserwowalne dane posiadające DOM elementu ko.dataFor(dom). Jak uzyskać DOM według danych?

http://jsfiddle.net/5rxdZ/

Dzięki

Answer 1

Nie można uzyskać elementu DOM z samych danych. W tym scenariuszu można jednak użyć powiązania hasfocus, aby przenieść fokus do nowego elementu. Dokumenty tutaj: http://knockoutjs.com/documentation/hasfocus-binding.html

Nawet samo umieszczenie hasfocus: true na nowym elemencie może załatwić sprawę.

W przeciwnym razie, jeśli nie chcą skupić być stosowane dla elementów wykonywanych początkowo, a następnie można przejść w flagę dla nowo utworzonego elementu jak:

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

widok modelu

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

Próbka: http://jsfiddle.net/rniemeyer/jnHK8/