problems with Handlebars JS

Question

problems with Handlebars JS

Navigation

#1 by (1 votes)

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:

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

javascript jquery

asked by anonymous 24.08.2015 / 16:58

1 answer

Do not run iframe while not clicking Webview android does not load css image

score 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>