SORU
4 Ocak 2011, Salı


javascript içinde kullanarak jilet

mümkün ya da görünümde olduğunu javacript içinde razor sözdizimini kullanmak için bir çözüm var mı?( * ) bir google işaretçileri eklemek için çalışıyorum.. göster...e.g bu ama ben derleme hataları: bir ton almaya çalıştım

<script type="text/javascript">

//some javascrpt code here to display map etc


//now add markers
 @foreach (var item in Model) {

      var markerlatLng = new google.maps.LatLng(@(Model.Latitude), @(Model.Longitude));
      var title = '@(Model.Title)';
      var description = '@(Model.Description)';
      var contentString = '<h3>'   title   '</h3>'   '<p>'   description   '</p>'

      var infowindow = new google.maps.InfoWindow({
          content: contentString
      });

      var marker = new google.maps.Marker({
          position: latLng,
          title: title,
          map: map,
          draggable: false
      });

      google.maps.event.addListener(marker, 'click', function () {
          infowindow.open(map, marker);
      });


      }
</script>

CEVAP
4 Ocak 2011, Salı


here, jilet derleyici içerik moduna geri zorlamak için açıklandığı gibi <text> pseudo-element, kullanın

<script type="text/javascript">

//some javascrpt code here to display map etc


//now add markers
 @foreach (var item in Model) {
    <text>
      var markerlatLng = new google.maps.LatLng(@(Model.Latitude), @(Model.Longitude));
      var title = '@(Model.Title)';
      var description = '@(Model.Description)';
      var contentString = '<h3>'   title   '</h3>'   '<p>'   description   '</p>'

      var infowindow = new google.maps.InfoWindow({
          content: contentString
      });

      var marker = new google.maps.Marker({
          position: latLng,
          title: title,
          map: map,
          draggable: false
      });

      google.maps.event.addListener(marker, 'click', function () {
          infowindow.open(map, marker);
      });

   </text>
      }
</script>

Güncelleme:

@: hakkında Scott Guthrie recently posted eğer sadece eklemek için javascript kodu bir veya iki satır <text> etikete göre biraz daha az hantal olan Razor sözdizimi,. Aşağıdaki yaklaşım muhtemelen oluşturulan HTML boyutunu azaltır, çünkü daha iyi olur. (Daha da küçültmek) için statik, önbelleğe alınmış bir javascript dosyası addMarker işlevi taşınabilirsin:

<script type="text/javascript">

//some javascript code here to display map etc
...
//declare addMarker function
function addMarker(latitude, longitude, title, description, map)
{
      var latLng = new google.maps.LatLng(latitude, longitude);
      var contentString = '<h3>'   title   '</h3>'   '<p>'   description   '</p>';

      var infowindow = new google.maps.InfoWindow({
          content: contentString
      });

      var marker = new google.maps.Marker({
          position: latLng,
          title: title,
          map: map,
          draggable: false
      });

      google.maps.event.addListener(marker, 'click', function () {
          infowindow.open(map, marker);
      });
}

//now add markers
 @foreach (var item in Model) {
     @:addMarker(@item.Latitude, @item.Longitude, '@item.Title', '@item.Description', map);
 }
</script>

Yukarıdaki kod addMarker çağrı daha doğru yapmak için güncellendi.

addMarker Ara C çok benziyor olsa da, @: kuvvetler Jilet geri metin moduna açıklamak# kodu. Razor daha sonra bu özellikleri içeriğini çıkışı gerektiğini doğrudan söylemek @item.Property sözdizimi alır.

Güncelleme 2

Görünüm kodu gerçekten çok iyi bir yer olmadığını belirtmekte fayda JavaScript koymak için. JavaScript ** 15 statik bir dosya içinde yer almalı ve sonra da HTML data- öznitelikleri tarayarak bir AJAX çağrısından veya gerekli veri almak gerekir. Senin javascript önbelleğe mümkün kılmanın yanında, bu da Razor HTML, ama JavaScript için kodlamak için tasarlanmıştır beri kodlama ile ilgili sorunları önler.

Görünüm Kodu

@foreach(var item in Model)
{
    <div data-marker="@Json.Encode(item)"></div>
}

Javascript kodu

$('[data-marker]').each(function() {
    var markerData = $(this).data('marker');
    addMarker(markerData.Latitude, markerData.Longitude, 
        markerData.Description, markerData.Title);
});

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • FOSDEM

    FOSDEM

    13 Ocak 2009
  • Julian Smith

    Julian Smith

    31 EKİM 2006
  • Phandroid

    Phandroid

    26 Ocak 2009