Error showing data in handlebars-js

3

I'm trying to access the id of this element sent by json in 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"
        }
    }
}

The code that I have like this

@{{#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}}

and even then you do not access the post_id

The code of my js is the following:

var template = render_template('#send-photo', {
    'message': response.message.message, 
    'type': response.message.type, 
    'photo': response.message.photo, 
    'post_id': response.message.post_id
});
    
asked by vdjkelly 15.03.2016 в 22:08
source

1 answer

2

Cause: different contexts

The problem happens because you have changed the context and then post_id is no longer accessible.

The concept of context in Handlebars / Mustache would be the object whose properties you can access using the {{ }} keys at a given time. The top level of the context is the object that you passed as the second parameter in render_template , but helpers as #each modify it.

By doing @{{#each photo}} you're changing the context of the original to exclusively the photo object where there is no longer a property called post_id so {{post_id}} is empty.

For more information about contexts and paths in the Handlebars documentation .

Solution: change route with ../

In your case you have changed the context to photo , so you only want to upload to the context of the parent. For this you can use ../ to change the path / path of the property to that of the parent. In your case, what you would have to change is {{post_id}} by {{../post_id}} and that will solve the problem.

  

Note: ../ can be combined to keep going through the contexts. ../ will access the parent, but you can "upload" more contexts: ../../ will allow access to a property on the father of the father, ../../../ for the context of the father of the father of the father, and so on.

The lines that would need changes in your code:

<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>
    
answered by 16.03.2016 / 13:36
source