javascript - 无需 $parent 即可访问嵌套绑定(bind)上下文

Question

我刚刚开始使用 Knockout.js 开发 map 应用程序。我有点知道绑定(bind)上下文是如何工作的，但我不明白 showCoord 是如何工作的无需 $parent 即可访问该函数。这是代码

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(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: 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);
}

并检查“self”的值。

<小时/>

正确的绑定(bind)方式是这样的:

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>

<小时/>

更新如果您想使用 IIFE，该函数不应尝试绑定(bind)自身 - 它需要绑定(bind)其对象之一。所以需要添加一个封装函数，让MapApplication成为一个对象。请参阅this 。如果需要的话，这还允许您将多个对象绑定(bind)到 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>