2015-11-03 10 views
7

Sto cercando di creare un'app store locator utilizzando questo tutorial e Laravel 5. Le persone in queste domande Here e Here sembrano utilizzare @foreach loop e altri linguaggi di template per eseguire le loro coordinate lat/long. Come stanno facendo questo?Come utilizzare Laravel Blade in un file di script?

Fondamentalmente non so come eseguire il loop delle coordinate usando blade quando il mio codice mappa si trova in un file js? Come è possibile? Sto facendo qualcosa di completamente sbagliato?

sto mostrando la mia mappa con un file js (maps.js) che ha il seguente codice:

function initialize() { 

var map_canvas = document.getElementById('map'); 

// Initialise the map 
var map_options = { 
    center: location, 
    zoom: 10, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
} 
var map = new google.maps.Map(map_canvas, map_options) 

// Put all locations into array 
var locations = [ 
@foreach ($articles as $article) 
    [ {{ $article->lat }}, {{ $article->lng }} ]  
@endforeach 
]; 

for (i = 0; i < locations.length; i++) { 
    var location = new google.maps.LatLng(locations[i][0], locations[i][1]); 

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

// marker.setMap(map); // Probably not necessary since you set the map above 

} 

Ma, ovviamente, che si blocca sulla linea @foreach.

PS: Se qualcuno ha seguito questo tutorial con Laravel 5, sarei grato per qualsiasi informazione su questa parte: Output di XML con PHP.

risposta

15

Non esiste alcun modo per utilizzare il template di Blade all'interno di un file Javascript esterno.

Laravel può solo passare dati a una vista/modello; I file Javascript vengono caricati esternamente e pertanto i dati dell'app non vengono trasmessi a loro.

Per aggirare il problema, è necessario creare <script> tag all'interno del file modello lama:

{{-- Code in your template file, e.g., view.blade.php --}} 

<script type="text/javascript"> 

// Put all locations into array 
var locations = [ 
@foreach ($articles as $article) 
    [ "{{ $article->lat }}", "{{ $article->lng }}" ], 
@endforeach 
]; 

// NOTE: I've added a comma which will be needed to delimit each array within the array. 
//  Quotes will also be needed since lat and long are not integers. 

</script> 

Assicurarsi che questo frammento viene prima il codice per includere il file maps.js. Se hai incluso il file maps.js nei tuoi tag <head>, dovrai spostare lo snippet di inclusione in fondo alla pagina.

Questa è una soluzione piuttosto rudimentale, tuttavia. Un modo migliore sarebbe utilizzare AJAX per recuperare i dati dal proprio file maps.js al momento dell'inizializzazione.

Ciò richiederebbe, ovviamente, la creazione di un nuovo metodo di controllo e di un percorso corrispondente in grado di gestire la richiesta e restituire i dati richiesti.

+0

Questo ha funzionato perfettamente per me! Ma c'è un modo per farlo con più variabili? Ad esempio, se volessi inserire il contenuto in ciascuno dei marcatori. Come potrei farlo? – AlmostPitt

+0

cosa intendi? nel tuo controller potresti semplicemente passare più variabili .. come 'view ('myView', ['variable1' => $ variabile1, 'variabile2' => $ variabile2, ecc ...])'; – heisian

+0

Sì, vorrei mettere array separati all'interno delle posizioni variabili. Ad esempio, per ogni posizione, vorrei anche inserire il titolo della posizione e alcune altre informazioni. Dopo aver visto questo post, ho postato un'altra domanda al riguardo. Forse questo aiuterà a chiarire la mia domanda: https://stackoverflow.com/questions/45924237/laravel-5-4-blade-javascript-google-maps-insert-foreach-with-multiple-variabl – AlmostPitt

1

È possibile creare un oggetto JavaScript dall'oggetto Eloquent, ad esempio, date un'occhiata al seguente codice:

// index.blade.php 
<script>var userObj = {{ $authUser or 'undefined' }}</script> 

Questa è una vista blade e io sono solo il caricamento del view e passando il collection a la vista utilizzando qualcosa di simile (utilizzo di un view composer):

View::composer('layouts.master', function($view) { 
    $user = null; 
    if(Auth::check()) { 
     $user = Auth::user(); 
    } 
    $view->with('authUser', $user); 
}); 

quindi, a mio view ho $authUser così ho ca n convertirlo in JS oggetto facilmente come:

<script>var userObj = {{ $authUser or 'undefined' }}</script> 

Così ora, posso usarlo come un oggetto JS che è in userObj variabile (JavaScript). Controlla this article of mine che ho scritto quasi un anno fa per Laravel-4.

1

Negli esempi forniti, utilizzano blade perché si trovano in un file blade e tutti i JavaScript si trovano tra i tag. Non è un tipo di file .js, quindi puoi utilizzare le funzionalità del linguaggio blade in questo modo.

Problemi correlati