您如何使用淘汰赛 js 引用当前元素？

Posted 2023-03-27

【中文标题】您如何使用淘汰赛 js 引用当前元素？

【英文标题】：How do you refer to a current element using knockout js?

【发布时间】：2018-02-27 15:26:02

【问题描述】：

我无法访问我存储的“位置”数组。 Locations 是一个对象文字，我正在尝试基于我单击的当前元素访问标题属性。我有以下代码，但我无法将它正确地控制台记录。我的猜测是我对“this”和闭包函数的使用并不强。希望我能很好地解释这一点，以便有人能有所了解。非常感谢任何反馈和解释。

（旁注：我的项目需求说我需要使用Knockout JS框架和MVVM格式）

html

          <ul data-bind="foreach:locationsArray, click:goToLocation">
            <li><span id="place" data-bind="text:title"></span></li>
          </ul>

2) javascript 视图模型

var ViewModel = function() 

  var self = this;

  self.locationsArray = ko.observableArray(locations);

  //My goal here is to log the current title of the location selected from the 
  //model. This is the part that is not working..
  self.goToLocation = function(self) 
    console.log(self.locations);
  

3) Javascript 数据模型（JSON 格式）

var locations = [
  
    title: 'Nino\'s Pizza',
    location: 
      lat: 40.620057,
      lng: -74.032894
    
  ,
  
    title: 'Shore Road Bike Path',
    location: 
      lat: 40.623089,
      lng: -74.040596
    
  ,
  
    title: 'Paneantico Bakery',
    location: 
      lat: 40.619418,
      lng: -74.0322818
    ]

【参考方案1】：

您需要将点击事件附加到li 而不是ul。

<ul data-bind="foreach:locationsArray">
  <li><span id="place" data-bind="text:title, click:$parent.goToLocation"></span></li>
</ul>

在这里，$parent 将告诉 Knockout 在 ViewModel 中寻找 goToLocation 而不是 location 对象。

然后在你的js中：

var ViewModel = function() 
  var self = this;
  self.locationsArray = ko.observableArray(locations);

  // item will have the data of the clicked li
  self.goToLocation = function(item) 
    console.log(item);
  


ko.applyBindings(new ViewModel());

这里是fiddle