$ parentなしでネストされたバインディングコンテキストにアクセス可能

Question

knockout.jsを使用してMapアプリケーションを開発し始めました。バインディングコンテキストの仕組みはわかっていますが、 の機能が$parentなしでどのようにアクセス可能であるかわかりません。ここでは、コード

var MapApplication = function() { 
 
\t // member function 
 
\t self = this; 
 

 
\t var map; 
 

 
\t self.locations = ko.observableArray([ 
 
\t \t {name: 'Museum', coord: {lat: -37.669012, lng: 144.841027}}, 
 
\t \t {name: 'Ariport', coord: {lat: -37.669012, lng: 144.841027}} 
 
\t ]); 
 

 
\t self.showCoord = function(obj) { 
 
\t \t console.log(obj.coord); 
 
\t } 
 

 
\t var init = function() { 
 
\t \t ko.applyBindings(MapApplication); 
 
\t }; 
 

 
\t $(init); 
 
}();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> 
 
<div class="places"> 
 
    <ul data-bind="foreach: locations"> 
 
\t <li data-bind="click: showCoord, text: name"></li> 
 
    </ul> 
 
</div>

Answer 1

$parentを使用して試してみて、何が起こるか見ています。

実際にはko.applyBindings(MapApplication)をko.applyBindings()に変更してみてください。同じように動作します。

何が起こっているのは、locationsがWindowの子機能のように動作しており、それ自身の親であるMapApplicationが認識されないということです。これは、MapApplicationを初期化しておらず、作成前に初期化することができないためです。

ボーナス - このようにコードを変更してみてください：

self.showCoord = function(obj) { 
    console.log(obj.coord); 
    console.log(self); 
} 

と '自己' の値を確認してください。

---

バインドする正しい方法はこのようになります：あなたは生命維持を使用したい場合は

var MapApplication = function() { 
 
    // member function 
 
    self = this; 
 

 
    var map; 
 

 
    self.locations = ko.observableArray([ 
 
     {name: 'Museum', coord: {lat: -37.669012, lng: 144.841027}}, 
 
     {name: 'Ariport', coord: {lat: -37.669012, lng: 144.841027}} 
 
    ]); 
 

 
    self.showCoord = function(obj) { 
 
     console.log(obj.coord); 
 
    }     
 
}; 
 
var init = function() { 
 
    ko.applyBindings(new MapApplication()); 
 
}; 
 
$(init);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> 
 
<div class="places"> 
 
    <ul data-bind="foreach: locations"> 
 
     <li data-bind="click: $parent.showCoord, text: name"></li> 
 
    </ul> 
 
</div>

---

更新 、関数がバインドしようとしないはずですそれ自体はオブジェクトの1つをバインドする必要があります。したがって、カプセル化関数を追加してMapApplicationをオブジェクトにする必要があります。 thisを参照してください。これにより、必要に応じて複数のオブジェクトをhtmlの異なる部分にバインドすることもできます。ここではそれがどのように見えるかです：答えレイ用

var applyBinding = function(){ 
 
    var MapApplication = { 
 
     locations : ko.observableArray([ 
 
      {name: 'Museum', coord: {lat: -37.669012, lng: 144.841027}}, 
 
      {name: 'Ariport', coord: {lat: -37.669012, lng: 144.841027}} 
 
     ]), 
 
     showCoord :function (obj) { 
 
      console.log(obj.coord); 
 
     } 
 
    }; 
 
    ko.applyBindings(MapApplication); 
 
}();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> 
 
<div class="places"> 
 
    <ul data-bind="foreach: locations"> 
 
     <li data-bind="click: $parent.showCoord, text: name"></li> 
 
    </ul> 
 
</div>