Wie kompiliere ich eine Ember-Aktion in einer JavaScript-Zeichenfolge?

Question

Innerhalb meiner Ember-Komponente items-map.js rufe ich eine Google Map auf. Die Google Map API ermöglicht mir, InfoWindows (die Blasen, die sich öffnen, sobald Sie auf einen Pin auf der Karte klicken).

Ich habe etwas HTML-Inhalt in diesen Blasen und klicken auf einen Link darin, sollte auf eine andere Route wechseln. Ich versuche dies mit einer Aktion innerhalb der Komponente zu erreichen, aber um das zu tun, muss ich zuerst die Handlebars-Syntax in den HTML-Code des infoWindows codieren.

Die JavaScript-String sieht wie folgt aus:

var infoWindowContent = '<a class="btn" href="javascript:void(0);" {{action "routeToItem"}}>See Items</a>'; 

Wie Sie sehen können, habe ich einen Lenker Aktion innerhalb der Zeichenfolge. Während die Schaltfläche gerendert wird, wird die Aktion "Lenker" nicht kompiliert. Ich habe versucht, die obige Zeichenfolge in einer `Handlebars.compile()‘ Methode, wie diese Verpackung:

var infoWindowContent = Ember.Handlebars.compile('var infoWindowContent = '<a class="btn" href="javascript:void(0);" {{action "routeToItem"}}>See Items</a>';'); 

dies einen Fehler erzeugt. Anstatt den Knopf zu bekommen, sehe ich jetzt den Text [object Object] wo der Knopf sein soll. Wie kann ich das beheben?

Answer 1

Da habe ich auch das gleiche Problem, aber ich habe auf diese Weise mit jquery angegangen, sicher, es wird funktionieren, versuchen Sie es.

var infoWindowContent = "<span class=\"tooltip-text\">" + 
         "<span class=\"infowIndow\">" + 
         "<a href=\"#/vehicle/<%= uuid %>\"><%= name %></a>" + 
         "</span>" + 
         "<span class=\"tool-tip firstItem-tool-tip\"><%= tool_tip_name %></span></span>"; 

var t = this; 
var vehicle_uuid = 'aBCfdf'; 
var infowindow = new google.maps.InfoWindow({ 
    content: infoWindowContent 
    }); 

    var marker = new google.maps.Marker({ 
    position: uluru, 
    map: map 
    }); 

    marker.addListener('click', function() { 
    infowindow.open(map, marker); 

    $('.infowIndow').on('click', function() { 
     // as I am also doing in component I am using t.get('targetObject') 
     t.get('targetObject').transitionToRoute('vehicle.history', vehicle_uuid); 
    }); 
    });