Comment faites-vous référence à un élément actuel en utilisant knockout js?

Question

Je rencontre des difficultés pour accéder à ma baie "emplacements" stockée. Locations est un littéral d'objet et j'essaie d'accéder à la propriété title BASED sur l'élément en cours sur lequel je clique. J'ai le code suivant mais je ne peux pas l'obtenir à console.log correctement. Ma conjecture est que mon utilisation de «ceci» et les fonctions de fermeture ne sont pas fortes. J'espère avoir suffisamment expliqué cela pour que quelqu'un puisse faire la lumière. Tous les commentaires et explications sont extrêmement appréciés.

(Sidenote: Mes besoins du projet disent que je dois utiliser le cadre JS knock-out et le format MVVM)

1. HTML

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

2) Javascript ViewModel

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) modèle de données Javascript (format 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 
    }] 

Answer 1

Vous devez joindre l'événement, cliquez sur le li pas ul.

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

Ici, $parent va dire knock-out pour trouver un goToLocation dans le ViewModel et non location objet.

Puis dans votre 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()); 

est ici fiddle