problems with Handlebars JS

0

The select box is not generating the values of the array of objects within handlebars ( selectMenu ).

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

{{# each arr}}

  • Here I separate what I'm going to 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>
    

Here's my jsfiddle: link

    
asked by anonymous 24.08.2015 / 16:58

1 answer

1

Denali, your problem is only scoped, once within a block your scope becomes the current object, so to access the parent object you need to use ../ to go up one 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><linkhref="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><scriptsrc="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>
    
24.08.2015 / 17:17