Knockout.js: how to dynamically assign id with foreach data-bind?

Question

I have the following code in html:

<ul data-bind="template: {name:'location', foreach:locations}">
 </ul>

<script type="text/html" id="location">
      <li>
        <a href='#' id="search_results" data-bind='text: title' class='w3-bar-item'></a>
      </li>
</script>

and the following code in viewModel:

var locations = [ (location lists)
  ];

var viewModel = {
  title: ko.observable("Attractions in Seattle, Washington"),
  query: ko.observable(""),
};

viewModel.locations = ko.dependentObservable(function(){
    var search = this.query().toLowerCase();
          return ko.utils.arrayFilter(locations, function(location) {
            return location.title.toLowerCase().indexOf(search) >= 0;
          });
        }, viewModel);

    ko.applyBindings(viewModel);

as shown below:

demo

and there is the following code in one of my regular javascript functions

$("#search_results").on('click', function() {
      var context = ko.contextFor(this);
      for (var i = 0; i < placeMarkers.length; i++) {
        temp = placeMarkers[i].title + ", Seattle";
        if (temp == context.$data.title) {
          getPlacesDetails(placeMarkers[i], placeInfoWindow);
        }
      }
    });

I am trying to dynamically show the result based on what context the user clicks, but my function works only for the first item in the list (only Space Needle, in this case). How can I fix it? what would be knockout.js-ic way?

+

I wrote like this inside of viewModel:

show_infowindow: function() {
    var context = ko.contextFor(this);
    for (var i = 0; i < placeMarkers.length; i++) {
      temp = placeMarkers[i].title + ", Seattle";
      if (temp == context.$data.title) {
        getPlacesDetails(placeMarkers[i], placeInfoWindow);
      }
    }
  }

where

<a href='#' data-bind='text: title, click: show_infowindow' class='search_results w3-bar-item'></a>

and now nothing is working, how can I fix this?

It looks like you'll have a lot of duplicate `id`s, try `class="search_results"` and adjusting your listener — IrkenInvader, Nov 09 '17 at 21:45
could try `$('ul').on('click', '.search_results', function(){` so it'll work for dynamically created search results — IrkenInvader, Nov 09 '17 at 21:47
@IrkenInvader it works great! thanks! Could you also explain what would be knockout.js-ic way to rewrite this jQuery, if possible? I am learning it and there's lots of confusion. — Nicholas Huh, Nov 09 '17 at 21:53
Instead of using a jquery listener I would have the binding in your anchor tags read `data-bind='text: title, click: Clicked'` then create a function inside your localtion model called `Clicked` to handle it — IrkenInvader, Nov 09 '17 at 21:58

adiga · Accepted Answer · 2017-11-10T06:38:52.120

I suggest you create viewModel function and use the new operator whenever you have a click function or a computed property (or dependentObservable prior to ko 2.0). This will reduce the pain of debugging and understanding what this means in callbacks.

So remove the jquery click event handler and change your viewmodel to:

var viewModel = function() {
  var self = this;

  self.title = ko.observable("Attractions in Seattle, Washington");
  self.query = ko.observable("");

  self.locations = ko.computed(function(){
    var search = self.query().toLowerCase();
     return ko.utils.arrayFilter(locations, function(location) {
         return location.title.toLowerCase().indexOf(search) >= 0;
      });
   }

  self.show_infowindow = function(location){
    // "location" parameter has the current location object being clicked
    // you can use it directly instead of ko.contextFor(this);
  }
};

// don't forget the "new" keyword
ko.applyBindings(new viewModel());

Change your template to add a click binding like this:

<script type="text/html" id="location">
      <li>
        <a href='#' id="search_results" data-bind='text: title, click:$parent.show_infowindow' class='w3-bar-item'></a>
      </li>
</script>

Since you are using the click binding inside a foreach, you need to prefix the click function with $parent keyword to get the proper binding context. Without $parent, knockout will look for show_infowindow in each location object instead of your viewModel.

Here's another useful answer on the differences between viewModel as an object literal vs a function

Knockout.js: how to dynamically assign id with foreach data-bind?

1 Answers1