1
votes

I have the following json object -

{ 
    "type": "typeOne", 
    "Children": [
          {
             "ChildType": "ChildTypeOne",
             "Settings": {
                  "IsChildTypeOne": true
              }
           },
           {
               "ChildType": "ChildTypeTwo",
               "Settings": {
                    "IsChildTypeTwo": true
                }
           }
     ] 
}

My handlebars template contains the following snippet -

{{#each Children}}
    {{#if Settings.IsChildTypeOne}}
        ChildTypeOne!!
    {{else}}
        ChildTypeTwo!!
    {{/if}}
{{/each}}

If I run this data through the template, the only thing that ever renders is ChildTypeTwo!!. So it seems that the if statement isn't properly evaluating IsChildTypeOne. The strange part is that if I put a statement in to display the value of IsChildTypeOne in the else clause, the value is displayed as true for the first ChildType.

Does anyone have any thoughts as to why this is not working as expected?

NOTE - the json posted above is a trimmed down version of my actual object. The real object has nested Children arrays that reuse the same object structure. So for instance, in my example, ChildTypeOne can also have a Childrens array with other objects within it.

EDIT**** So in stepping through the code, I found that if I had my type defined as follows -

...
"Settings" : {
   "IsChildTypeOne": 'true'
}
...

it appears to work. Removing the single quoted causes the value to be read as undefined when stepping through.

3

3 Answers

1
votes

Given charrs answer didn't seem to help, and the fact that your JSON is more complex than what you've posted, maybe your actual template isn't referencing a parent context correctly? For instance, if you wanted to access the type field in #each children block, it would look like this:

{{#each Children}}
    {{#if Settings.IsChildTypeOne}}
        {{../type}}
    {{/if}}
{{/each}}
1
votes

This ended up being related to the process being used to serialize the json string into an object. Please see the issue here for an explanation.

0
votes

Can you try changing the handlebar template code as below:

 {{#Children}}
       {{#if Settings.IsChildTypeOne}}
          ChildTypeOne!!!
       {{else}}
          ChildTypeTwo!!!
       {{/if}}
{{/Children}}

This would iterate your array of Children and would give you result as

ChildTypeOne!!! ChildTypeTwo!!!

Since your json has two elements one which has ChildTypeOne true and other not.

Sample handelbar:

<div class="entry">
  <h1>{{title}}</h1>
  <div class="body">
    {{body}}
    {{#Children}}
       {{#if Settings.IsChildTypeOne}}
          ChildTypeOne!!!
       {{else}}
          ChildTypeTwo!!!
       {{/if}}
{{/Children}}
  </div>
</div>

The html Output for above template :

<div class="entry">
  <h1>My New Post</h1>
  <div class="body">
    This is my first post!
          ChildTypeOne!!!
          ChildTypeTwo!!!
  </div>
</div>

You can see ChildTypeOne!!! for first element is coming.