JQuery/Handlebars.js von json Array Auswahlfeld aufzufüllen

Question

ich brauche, bezogen auf das JSON-Array "Option" ein Auswahlfeld aufzufüllen

My Script wie folgt aussehen:

var option = [ 
    {"mod":"A","values": 
     {"Field":"A","Value":"101"} 
    }, 
    {"mod":"B","values: 
     {"Field":"B","Value":"102"}}, 
    {"mod":"C","values" 
     {"Field":"C","Value":"99"} 
    }, 
    {"mod":"D","values":  
     {"Field":"D","Value":"96"} 
    }]; 


var theTemplateScript = $('#shoe-template').html(); 
var theTemplate = Handlebars.compile(theTemplateScript); 
$('.shoesNav').append(theTemplate(option)); 

und meine html ist wie folgt:

<script id="shoe-template" type="x-handlebars-template"> 
    {{#each option}} 
     <option value="{{values.Value}}"> 
      {{values.Field}} 
     </option> 
    {{/each}} 

</script> 
<select class="shoesNav">   
</select> 

ich aber keine Konsole Fehler haben, wird das Feld bevölkert nicht ist, was ich bin fehlt?

JSFiddle HERE

Answer 1

Sie müssen das Datenobjekt mit dem Schlüssel in der {{#each option}} Schleife Namespace, der in diesem Fall option ist. Hier ist eine funktionierende Implementierung:

var namespace = 'option'; 
 
var data = {}; 
 

 
data[namespace] = [{ 
 
    "mod": "A", 
 
    "values": { 
 
     "Field": "A", 
 
     "Value": "101" 
 
    } 
 
}, { 
 
    "mod": "B", 
 
    "values": { 
 
     "Field": "B", 
 
     "Value": "102" 
 
    } 
 
}, { 
 
    "mod": "C", 
 
    "values": { 
 
     "Field": "C", 
 
     "Value": "99" 
 
    } 
 
}, { 
 
    "mod": "D", 
 
    "values": { 
 
     "Field": "D", 
 
     "Value": "96" 
 
    } 
 
}]; 
 

 
var theTemplateScript = $('#shoe-template').html(); 
 
var theTemplate = Handlebars.compile(theTemplateScript); 
 
$('.shoesNav').append(theTemplate(data));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
 
<script src="https://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script> 
 
<script id="shoe-template" type="x-handlebars-template"> 
 
    {{#each option}} 
 
    <option value="{{values.Value}}"> 
 
     {{values.Field}} 
 
    </option> 
 
    {{/each}} 
 
</script> 
 
<select class="shoesNav"> 
 
</select>

ich Ihre Geige auch aktualisiert: http://jsfiddle.net/cu7n6j95/3/

Ich hoffe, das hilft.