हैंडलबार्स के लिए किसी ऑब्जेक्ट पर इटरेट करें?

Question

तो यह मेरे डेटा का सामान्य सारांश है (क्रोम वेबकिट इंस्पेक्टर से देखने की प्रतिलिपि बनाई गई है)।

> Object 
    > Fruit: Array[2] 
    > 0: Object 
     name: "banana" 
     color: "yellow" 
     animalthateats: "monkey" 
     id: 39480 
    > 1: Object 
    length: 2 
    > Vegetables: Array[179] 
    > Dairy: Array[2] 
    > Meat: Array[3] 
    > __proto__: Object 

और यही मैं (सामान्य रूप में) क्या करना चाहते है:

<select> 
    <option value="">All Shows (default)</option> 
    <optgroup label="Fruit"> 
    <option value="39480">Banana</option> 
    <option value="43432">Strawberry</option> 
    </optgroup> 
    <optgroup label="Vegetables"> 
    <option value="3432">Broccoli</option> 
    </optgroup> 
</select> 

मैं sorta पूरे templating बात करने के लिए नए हूँ, और यह निश्चित रूप से पूरा करने के लिए गैर-सीधा लगता है ... अगर मैं किसी भी तरह से jQuery का उपयोग कर सकता हूं जो भी काम करेगा, लेकिन अधिमानतः बस इस सेटअप के साथ।

Answer 1

आपके मौजूदा डेटा स्वरूप आप को प्रस्तुत करता है दो समस्याओं के साथ:

1. हैंडलबार वास्तव में ऑब्जेक्ट्स पर पुनरावृत्त करना चाहते हैं, ऑब्जेक्ट्स नहीं।
2. जावास्क्रिप्ट ऑब्जेक्ट्स का कोई विश्वसनीय ऑर्डर नहीं है।

बेहतर होगा कि तुम भाग्य होगा आप अपने डेटा को पुनर्व्यवस्थित नेस्ट सरणियों, कुछ इस तरह हो सकता है अगर:

var foods = { /* what you already have */ }; 
var for_hb = [ 
     { name: 'Fruit',  foods: foods.Fruit }, 
     { name: 'Vegetables', foods: foods.Vegetables }, 
     //... 
]; 

आप क्या कर सकते हैं कि कुछ इस तरह सरल के साथ:

var for_hb = [ ]; 
for(var k in foods) 
    for_hb.push({name: k, foods: foods[k]}); 
for_hb.sort(function(a, b) { 
    a = a.name.toLowerCase(); 
    b = b.name.toLowerCase(); 
    return a < b ? -1 
     : a > b ? +1 
     :   0; 
}); 

var html = compiled_template({ groups: for_hb }); 

फिर आपका टेम्पलेट सरल है:

<select> 
    <option value="">All Shows (default)</option> 
    {{#each group}} 
    <optgroup label="{{name}}"> 
    {{#each foods}} 
     <option value="{{id}}">{{name}}</option> 
    {{/each}} 
    {{/each}} 
</select> 

आप कोल डी किसी ऑब्जेक्ट पर पुनरावर्तित करने के लिए एक सहायक लिखें लेकिन यदि आपको एक समझदार प्रदर्शन आदेश सुनिश्चित करना है तो आपको अभी भी सरणी में कुंजी निर्दिष्ट करना होगा।

{{#each Listings}} 

<a href="javascript:void(0)" title="" ><img src=" {{DefaultImage}}" alt=" {{Make}} {{Model}}" /> </a> 

Answer 2

मैं एक मूंछें आदमी के और अधिक कर रहा हूँ: - {)

लेकिन यहाँ पर डॉक्स से यह बात इस तरह की तरह लग रहा है यह करना होगा:

<select> 
    <option value="">All Shows (default)</option> 
    <optgroup label="Fruit"> 
    {{#each Fruit}} 
    <option value="{{id}}">{{name}}</option> 
    {{/each}} 
    </optgroup> 
    <!-- repeat for others--> 
</select> 

Answer 3

उपयोग सिर्फ "इस"

`<script id="some-template" type="text/x-handlebars-template"> 
<option value="none">Selec</option> 
{{#each data}} 
    <optgroup label="{{@key}}"> 
    {{#each this}} 
     <option value="{{id}}">{{name}}</option> 
    {{/each}} 
    </optgroup> 
{{/each}} 
</script>` 

http://jsfiddle.net/rcondori/jfav4o6u/

Answer 4

जहाँ तक Handlebars-केवल समाधान के रूप में, मैं इस तर्क को क्रियान्वित किया है घटक उदाहरण देखें, यह हमारे डिफ़ॉल्ट {{each}} सहायक द्वारा समर्थित नहीं है (और यह जानबूझकर है)।

नमूना डेटा:

a = {a:'muhammad', b :'asif', c: 'javed', username: 'maxifjaved'} 

पुनरावृति के लिए **

ऑनलाइन डेमो एक वस्तु फेंक

http://emberjs.jsbin.com/yuheke/1/edit?html,js,output

**

Answer 5

आप एक कस्टम के माध्यम से ऐसा कर सकते हैं: