JavaScript文字列でEmberのアクションをコンパイルするにはどうすればよいですか？

Question

私のEmberのコンポーネントitems-map.jsの中で、私はGoogle Mapを呼び出しています。 Google Map APIを使用すると、infoWindows（地図上の任意のピンをクリックすると開いたバブル）を表示できます。

これらのバブルの中にいくつかのHTMLコンテンツがあり、その中のリンクをクリックすると、別のルートに移行する必要があります。私はコンポーネント内のアクションを使用してこれを達成しようとしていますが、そのためには、まず、Handlebarsの構文をinfoWindowのHTMLにエンコードする必要があります。

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

あなたが見ることができるように、私は文字列内のハンドルバーのアクションを持っている：

JavaScriptの文字列は次のようになります。ボタンがレンダリングされている間は、Handlebarsアクションはコンパイルされません。

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

これは、エラーを生成した：私はこのような `Handlebars.compile（）」メソッドで上記文字列をラップしようとしました。ボタンを取得する代わりに、ボタンがあるはずのテキストが表示されます。これをどうすれば解決できますか？

Answer 1

私も同じ問題を抱えていますが、jqueryを使用してこの方法でアプローチしています。試してみてください。

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); 
    }); 
    });