jqueryの/ Handlebars.jsはJSON配列

Question

から選択フィールドを移入私は

選択フィールドを移入するためにJSON配列「オプション」に基づいて、必要

私のスクリプトは次のようになります。

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)); 

と私のhtml

コンソールエラーはありませんが、フィールドにデータが入力されていません。何が欠けていますか？

JSFiddle HERE

Answer 1

あなたは、この場合にoptionある{{#each option}}ループ内のキーとデータオブジェクトを名前空間にする必要があります。ここでは作業の実装です：私もあなたのフィドルを更新

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>

： http://jsfiddle.net/cu7n6j95/3/

私はそれが役に立てば幸い。