3

Estoy tratando de acceder al id de este elemento enviado por json en handlebars.js

{
    "status":"success",
    "message": {
        "message":"sdasdasasd",
        "type":"photo",
        "post_id":55,
        "title":"",
        "description":"",
        "url":"",
        "image":"",
        "code":"",
        "provider":"",
        "photo": {
           "http:\/\/timeline.dev\/storage\/app\/public\/vdjkelly\/timeline_SzfkoDzMWc.jpg":"http:\/\/timeline.dev\/storage\/app\/public\/vdjkelly\/timeline_SzfkoDzMWc.jpg",
           "http:\/\/timeline.dev\/storage\/app\/public\/vdjkelly\/timeline_qm7sq7RY1K.jpg":"http:\/\/timeline.dev\/storage\/app\/public\/vdjkelly\/timeline_qm7sq7RY1K.jpg"
        }
    }
}

El código que tengo así

@{{#each photo}}

  <li class="grid">
    <div class="posted-photo">
      <div class="photo">
        <div class="fphoto-item">
          <a class="ShowStatus" data-id="@{{post_id}}" href="#" data-lightbox="lightbox@{{post_id}}">
            <img src="@{{this}}" class="imgpreview" id="@{{post_id}}" rel="@{{post_id}}">
          </a>
        </div>
      </div>
  </li>
@{{/each}}

y aun así no me accede al post_id

El código de mi js es el siguiente:

var template = render_template('#send-photo', {
    'message': response.message.message, 
    'type': response.message.type, 
    'photo': response.message.photo, 
    'post_id': response.message.post_id
});
6
  • te muestra algun dato? Has utilizado <script type="text/x-handlebars-template"> ?
    – fredyfx
    el 15 mar. 2016 a las 21:28
  • Si las fotos me las muestra, y si lo estoy usando
    – vdjkelly
    el 15 mar. 2016 a las 21:33
  • podrías poner el HTML generado?
    – fredyfx
    el 15 mar. 2016 a las 21:54
  • Interesante JSON, ¿por qué repetir la fuente en el identificador y el valor en lugar de usar algo como "src"? Aparte de eso, en el HTML generado, ¿data-id = undefined?
    – Alvaro Montoro
    el 15 mar. 2016 a las 21:54
  • <div class="fphoto-item"> <a class="ShowStatus" data-id="" href="#" data-lightbox="lightbox"> <img src="timeline.dev/storage/app/public/vdjkelly/…" class="imgpreview" id="" rel=""> </a> </div>
    – vdjkelly
    el 15 mar. 2016 a las 21:57

1 respuesta 1

3

Causa: diferentes contextos

El problema sucede porque has cambiado el contexto y entonces post_id ya no está accesible.

El concepto de contexto en Handlebars/Mustache sería el objeto cuyas propiedades puedes acceder usando las llaves {{ }} en un momento dado. El nivel superior del contexto es el objeto que has pasado como segundo parámetro en render_template, pero helpers como #each lo modifican.

Al hacer @{{#each photo}} estás cambiando el contexto del original a exclusivamente el objeto photo donde ya no hay una propiedad llamada post_id por lo que {{post_id}} se muestra vacío.

Para más información sobre contextos y paths en la documentación de Handlebars (en inglés).

Solución: cambiar ruta con ../

En tu caso has cambiado el contexto a photo, por lo que sólo quieres subir al contexto del padre. Para ello puedes usar ../ para cambiar la ruta/path de la propiedad a la del padre. En tu caso, lo que tendrías que cambiar es {{post_id}} por {{../post_id}} y eso solucionará el problema.

Nota: ../ puede combinarse para seguir atravesando los contextos. ../ accederá al padre, pero puedes "subir" más contextos: ../../ permitirá acceder a una propiedad en el padre del padre, ../../../ para el contexto del padre del padre del padre, y así sucesivamente.

Las líneas que necesitarían cambios en tu código:

<a class="ShowStatus" data-id="@{{../post_id}}" href="#" data-lightbox="lightbox@{{../post_id}}">
    <img src="@{{this}}" class="imgpreview" id="@{{../post_id}}" rel="@{{../post_id}}">
</a>
1
  • Gracias por la solución.. me sirve de mucho tu explicación esta clara y entendible se le agradece.
    – vdjkelly
    el 16 mar. 2016 a las 14:39

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.