선택한/클릭 된 요소를 기반으로 관찰 가능한 값을 설정하는 방법

Question

샘플이 있습니다. 선택한 요소의 텍스트 값을 감지하고 팝업 창에 채워 넣으려고합니다. jQuery를 사용하여이 작업을 수행하는 방법을 알고 있지만 Ui 인식을 뷰 모델로 가져오고 싶지 않습니다. 나는 간단한 것을 놓치고 있다는 것을 알고 있지만 누군가 UI에서 선택한 요소의 텍스트 값을 바인딩하고 Knockout 내의 다른 관찰 가능 요소에 바인딩해야한다고 설명 할 수 있습니다. JsFiddle

마이너스 여기에 CSS 내가 지금까지

<ul data-bind="foreach: items"> 
    <li class="divContainer"> <span title="filename" class="tbox" data-bind="text: name, click: $root.openControl "></span> 
<span title="description" class="tbox" data-bind="text: description"></span> 

    </li> 
</ul> 
<div id="nameDiv" class="nameContainer"> <span class="smallTitle"></span> 

    <input type="textbox" class="mytextbox" data-bind="value: currentField" /> 
    <input type="button" id="SaveChange" class="editbtn" value="&#x2714;" /> 
    <input type="button" id="CancelChange" class="editbtn" value="&#x2716;" /> 
</div> 

JS 미리

var Item = function (name, description) { 
    this.name = ko.observable(name); 
    this.description = ko.observable(description); 
} 

    function myViewModel() { 
     var self = this; 
     //sample list of items 
     self.items = ko.observableArray([ 
     new Item('item 1', ' item 1 Description'), 
     new Item('item 2', 'item 2 Description'), 
     new Item('item 3', 'Report3 Description'), 
     new Item('item 4', 'Report4 Description')]); 

     //observable fields 
     self.currentField = ko.observable(""); 

     //bind current item text to field 
     self.openControl = function() { 
      self.currentField($(this)); ///Here I need to pick up the text of the item that was clicked on 
     }; 
    }; 

ko.applyBindings(new myViewModel()); 

function positionDiv(x_pos, y_pos) { 

    var d = document.getElementById('nameDiv'); 
    d.style.display = 'none'; 
    d.style.position = 'absolute'; 
    d.style.left = x_pos + 'px'; 
    d.style.top = y_pos + 'px'; 
    $('#nameDiv').fadeIn('slow'); 
} 
$('.tbox').click(function() { 
    var myText = $(this); 
    var t = $(this).attr('title'); 
    if (t === 'filename') { 
     $('.smallTitle').text('Enter new filename'); 
    } else { 
     $('.smallTitle').text('Enter new description'); 
    } 
    displayEditBox(myText); 
}); 


function displayEditBox(myText) { 

    //determine middle of span element 
    var offset = myText.offset(); 
    var width = myText.width(); 
    var height = myText.height(); 
    var centerX = offset.left + width + 5; 
    var centerY = offset.top - 10; 

    positionDiv(centerX, centerY); 
} 

$('#CancelChange').click(function() { 
    $('#nameDiv').fadeOut('fast'); 
    clearField($('.mytextbox')); 
}); 

function clearField(field_name) { 
    field_name.val(''); 
} 

감사를 엮은했다는 HTML과 JS입니다 작업 전체

Answer 1

매개 변수를 가져 오려면 openControl 함수의 정의를 변경하십시오. eter :이 클릭이 때문에 click가되어 결합 위치에 적용되었다는 item합니다 (items 배열의 요소)이어야

self.openControl = function (item) { 
    self.currentField(item.description()); 
}; 

는 데이터 컨텍스트 foreach: items의 신체 구속력 .