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

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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