Knockout2.x:ko.dataFor()、ko.contextFor() 사용

앞에서 말했듯이, 모든 성명식 귀속이 있는dom 요소에 대해 ko는 귀속 상하문 (bindingContext) 과 귀속 대상을 설정합니다.모든 귀속 상하문에는 $parent와 $data 두 개의 속성이 포함되어 있습니다. $data 속성은 이dom 요소의 귀속 대상이고 $parent 속성은 상급 요소의 귀속 대상입니다.즉, 만약에 우리가 방문 귀속 대상에게 접근하려면 먼저 귀속 상하문을 얻어야 한다. 귀속 상하문을 통해 귀속 대상에 접근해야 한다:bingingContext.$data.속성 이름, bingingContext.$parent.속성 이름.우리의 이전 예에서는 모두 $데이터만 사용했다.속성 이름, $parent.속성 이름에 접근할 수 있습니다. 이것은 ko 내부에서 (정확히 말하면 binding 구성 요소) bingingContext를 얻을 수 있도록 도와주었기 때문입니다.만약 우리가 ko 외부에서 귀속 대상이나 귀속 상하문에 직접 접근하고 싶다면: ko.dataFor(element)、ko.contextFor(element).
 

기본 구문: $data 액세스

Html 코드

<span data-bind="text: myName" id="111"></span><br/>
<a href="javascript:void(0)"  onClick="toBingingData()">      </a>

Js 코드

<script type="text/javascript">
ko.applyBindings({        
		myName:"  "
    });

</script>
<script type="text/javascript">
function toBingingData(){
    var bindingContext = ko.contextFor(document.getElementById("111"));//       
    alert(bindingContext['$data'].myName);//      
	//var bindingData = ko.dataFor(document.getElementById("111"));//        
	//alert(bindingData.myName);
}
</script>

 

기본 구문: $parent 액세스

Html 코드

<table data-bind="foreach: people"  id="333">
        <tr>
            <td data-bind="text: firstName" id="111"></td>
            <td data-bind="text: lastName" id="222"></td>
        </tr>
</table>

<script type="text/javascript">
ko.applyBindings({        
		myName:"  "
    });

</script>
<script type="text/javascript">
$("#111").click(function () {
   var bindingData = ko.dataFor(this);//      
   alert(bindingData.myName);//      
});
</script>

  <a href="javascript:void(0)" onClick="toBindingData()">      </a>

Js 코드

<script type="text/javascript">
ko.applyBindings({
        people: [
            { firstName: 'Bert', lastName: 'Bertington' }
        ],
		myName:"zuoliangzhu"
    });

</script>
<script type="text/javascript">
function toBindingData(){
    var bindingContext = ko.contextFor(document.getElementById("111"));
	alert(bindingContext['$parent'].myName);//        
	alert(bindingContext['$data'].firstName);//        
	//var parentBindingContext = ko.contextFor(document.getElementById("333"));//           
	//alert(parentBindingContext['$data'].myName);
}
</script>

 
 

jquery 사용

Html 코드

<span data-bind="text: myName" id="111"></span><br/>

Js 코드

<script type="text/javascript">
ko.applyBindings({        
		myName:"  "
    });

</script>
<script type="text/javascript">
$("#111").click(function () {
   var bindingData = ko.dataFor(this);//      
   alert(bindingData.myName);//      
});
</script>

주의: jquery 라이브러리 도입하기
 
 
 
출처: http://www.see-source.com/front/front!index