Question

我刚开始使用knockout.js开发Map应用程序。我有点知道绑定上下文如何工作但我不明白showCoord是怎么做的函数可以在没有$parent的情况下访问。这是代码

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

尝试使用$parent，看看会发生什么。

事实上，请尝试将ko.applyBindings(MapApplication)更改为ko.applyBindings()。它仍然会以同样的方式工作。

正在发生的事情是locations的行为类似于Window的子函数，并且它自己的父MapApplication无法识别。这是因为您尚未初始化MapApplication，并且在创建之前无法对其进行初始化。

奖金 - 尝试修改您的代码：

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

并检查'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>

<强>更新如果你想使用IIFE，函数不应该尝试绑定它自己 - 它需要绑定它的一个对象。因此，您需要添加封装函数并使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>

无需$ parent即可访问嵌套绑定上下文

1 个答案: