Collection View

bind.html

{{view view.resultsCollectionView contentBinding="searchResults"}}

ResultsCollectionView.js

App.ResultsCollectionView = Ember.CollectionView.extend({
  classNames: ["search-results", "link-list", "accent-blue"],
  classNameBindings: ["isVisible"],
  tagName: "ul",
  isVisible: false,
  itemViewClass: Ember.View.extend({
    templateName: "resultsCollectionItem",
    tagName: "li",
    classNameBindings: ["isSelected:selected"],
    init: function () {
      this._super();
      this.set("parentView.isVisible", true);
    },
    marker: function () {
      var markerId= this.get("content.markerId"),
        map = this.get("controller.controllers.map");

      return map.get("markerGroups.search.layer").getLayer(markerId);
    }.property("content.markerId"),
    click: function (event) {
      var self = this,
        $this = $(event.target),
        content = this.get("content"),
        coords = content.point.coordinates;

      if($this.is("li")) {
        coords = this.get("latLng");

        this.get("parentView").unselectAllChildren();

        this.get("controller").transitionToRoute("location.summary", 
          Ember.Object.create({ latlng: coords })
        ).then(function (transition) {
          self.panOnceVisible(coords);
          transition.controllerFor("map").get("lastSetMarker").fire("click");
        }, this);
        this.set("isSelected", true);
      }
    },
    latLng: function () {
      var content = this.get("content"),
        coords = content.point.coordinates,
        latlng = { lat: coords[0], lng: coords[1] };

      return latlng;
    }.property("content"),
    mouseEnter: function () {
      var marker = this.get("marker"),
        mapController = this.get("controller.controllers.map");

      marker.setIcon(mapController.get("searchMarkerOptions").icon);
    },
    mouseLeave: function () {
      var marker = this.get("marker");

      marker.setIcon(new L.Icon.Default());
    },
    panOnceVisible: function (latlng) {
      var mapController = this.get("controller.controllers.map");

      mapController.send("markerAsidePan", latlng);           
    },
  }),
  unselectAllChildren: function () {
    this.get("childViews").forEach(function (child) {
      child.set("isSelected", false);
    });
  }
});