problems with JS Handlebars

Question

select box is not generating object array values within handlebars (selectMenu).

• In this loop I add the values inside an input:

{{#each arr}}

• Here I separate what I send to create my template:

      var model = {
          arr: arraySeq,
          menuselect: selectMenu
  
      };
  
  
      var tmlMenu = Handlebars.compile( $('#tmlMenu').html() );
      var menus = $.parseHTML(tmlMenu(model));
      $("#conteudo").append(menus);
  
  
  
          <select class="info-perg">
              {{#each menuselect}}
                  <option value="{{this.value}}">{{this.descricao}}</option>
              {{/each}}
          </select>
  

Just follow my jsfiddle: http://jsfiddle.net/y9qdrgwy/1/

Answer 1

Denali, your problem is only of scope, once inside a block your scope becomes the current object, then to access the parent object you need to use ../ to climb a level:

var arraySeq = [1,2,3,4];
var selectMenu = [
  { value: "1", descricao: "1" },
  { value: "2", descricao: "2" },
  { value: "3", descricao: "3" },
  { value: "4", descricao: "4" },
  { value: "5", descricao: "5" },
  { value: "6", descricao: "6" },
  { value: "7", descricao: "7" }
];
var model = {
  arr: arraySeq,
  menuselect: selectMenu
};
var tmlMenu = Handlebars.compile( $('#tmlMenu').html() );
var menus = $.parseHTML(tmlMenu(model));
$("#conteudo").append(menus);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="http://www.fsfoo.com/js/vendor/handlebars-1.0.rc.2.js"></script>
<div id="conteudo"></div>   
    <script id="tmlMenu" type="text/x-handlebars-template">
        {{#each arr}}
        <div class="main" >
        <div class="component-container "></div>
        <ul class="nav">
            <li class="col-md-5"><input type="text" class="info-num-perg form-control" style="width: 100%" value="{{this}}"/></li>
            <li class="col-md-5"><input type="text" class="info-notapergunta form-control"  placeholder="Digite"/></li>
            <li class="col-md-2">
                <select class="info-perg">
                    {{#each ../menuselect}}
                        <option value="{{this.value}}">{{this.descricao}}</option>
                    {{/each}}
                </select>
            </li>
        </ul>
        </div>
        {{/each}}
    </script>