Knockout2.x：ko.dataFor()、ko.contextFor()使用

在前幾篇中咱們已經說了，對於每一個具備聲明式綁定的dom元素，ko都會爲其設置一個綁定上下文(bindingContext)和一個綁定對象。而每一個綁定上下文中都包含$parent和$data倆個屬性，$data屬性就是該dom元素的綁定對象，$parent屬性是上級元素的綁定對象。也就是說若是咱們要向訪問綁定對象，首先要得到綁定上下文，在經過綁定上下文來訪問綁定對象：bingingContext.$data.屬性名、bingingContext.$parent.屬性名。而咱們之前的例子中都是隻用$data.屬性名、$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>
<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