web-dev-qa-db-fra.com

Comment utiliser Laravel Blade dans un fichier script?

J'essaie de créer une application de localisation de magasins en utilisant ceci tutoriel et Laravel 5. Les gens dans ces questions ici et ici semble utiliser les boucles @foreach et d'autres langages de modèle de lame pour parcourir ses coordonnées lat/long. Comment font-ils cela?

Je ne sais pas comment parcourir les coordonnées à l'aide de la lame lorsque mon code de carte est dans un fichier js? Comment est-ce possible? Suis-je en train de faire quelque chose de totalement faux?

Je montre ma carte avec un fichier js (maps.js) qui a le code suivant:

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

}

Mais évidemment, cela reste bloqué sur la ligne @foreach.

PS: Si quelqu'un a suivi ce tutoriel avec Laravel 5 je serais reconnaissant pour toute information sur cette partie: Sortie XML avec PHP.

javascriptphpgoogle-mapslaravel
14
thomas jaunism

Il n'y a aucun moyen d'utiliser le modèle Blade dans un fichier Javascript externe.

Laravel ne peut transmettre des données qu'à une vue/un modèle; Les fichiers Javascript sont chargés en externe et les données de l'application ne leur sont donc pas transmises.

Pour contourner ce problème, vous devez créer <script> balises dans votre fichier de modèle Blade:

{{-- 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>

Assurez-vous que cet extrait de code vient avant le code pour inclure votre maps.js fichier. Si vous avez inclus le maps.js fichier dans votre <head> tags, vous devrez déplacer cet extrait d'inclusion vers le bas de la page.

Il s'agit cependant d'une solution plutôt rudimentaire. Une meilleure façon serait d'utiliser AJAX pour récupérer les données depuis votre maps.js fichier lors de l'initialisation.

Cela nécessiterait, bien sûr, de créer une nouvelle méthode de contrôleur et une route correspondante pouvant gérer la demande et renvoyer les données requises.

27
heisian

Vous pouvez créer un objet JavaScript à partir de l'objet Eloquent, par exemple jetez un œil au code suivant:

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

Ceci est une vue blade et je charge simplement la view et je passe la collection à la vue en utilisant quelque chose comme ça (Utilisation d'un view composer =):

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

Donc, dans mon view j'ai $authUser pour que je puisse le convertir en JS objet facilement comme:

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

Alors maintenant, je peux l'utiliser comme un objet JS qui est dans la variable userObj (JavaScript). Vérifiez cet article que j'ai écrit il y a près d'un an pour Laravel-4.

2
The Alpha

Dans les exemples que vous avez fournis, ils utilisent Blade car ils se trouvent dans un fichier Blade et tout le JavaScript se trouve entre les balises. Ce n'est pas un type de fichier .js, vous pouvez donc utiliser les fonctionnalités du langage lame de cette façon.

1
James