2016-04-16 18 views
0

Ich bin neu bei Handlebars.js und ich habe ein Problem, das ich nicht lösen kann. Ich habe mich umgesehen und kann nicht genau die Antwort finden, nach der ich suche.Lenker.js Schleife innerhalb einer Schleife

Ich habe ein Master-Objekt mit Budget Informationen gefüllt. Jedes Element innerhalb des Budgetabschnitts des Objekts hat eine Kategorie mit einem Kategorienamen und dann 12 weitere Felder. Diese Felder heißen Jan, Feb, ..., Dez und haben die Werte des Budgetpostens für den entsprechenden Monat.

In einem anderen Abschnitt des Masterobjekts habe ich ein Array von Monatsnamen namens monthList (Jan, Feb, ..., Dec).

Was ich tun möchte, ist {{#each}} über die Budgetelemente, um eine <tr> pro Budgetkategorie zu erstellen. Aber anstatt meine Lenkervorlage für jedes der 12 Monate eine separate <td> definiert zu haben, würde ich gerne durch die monateList iterieren und eine <td> pro Monat über die Tabelle erstellen.

Ich kann nicht für das Leben von mir herausfinden, wie man dies geschieht. Ich vermute, es ist mit einem Lenker-Helfer, aber ich sehe nicht ganz so, wie es geht.

Meine Daten Objekt sieht wie folgt aus:

var data = { 
    budget: [{ 
    category: "Rent", 
    Jan: "300", 
    Feb: "300", 
    Mar: "300", 
    Apr: "300", 
    May: "300", 
    Jun: "300", 
    Jul: "300", 
    Aug: "300", 
    Sep: "300", 
    Oct: "300", 
    Nov: "300", 
    Dec: "300" 
    }, { 
    category: "Utilities", 
    Jan: "100", 
    Feb: "100", 
    Mar: "100", 
    Apr: "100", 
    May: "100", 
    Jun: "100", 
    Jul: "100", 
    Aug: "100", 
    Sep: "100", 
    Oct: "100", 
    Nov: "100", 
    Dec: "100" 
    }, { 
    category: "Food", 
    Jan: "400", 
    Feb: "400", 
    Mar: "400", 
    Apr: "400", 
    May: "400", 
    Jun: "400", 
    Jul: "400", 
    Aug: "400", 
    Sep: "400", 
    Oct: "400", 
    Nov: "400", 
    Dec: "400" 
    }, { 
    category: "Beer", 
    Jan: "1000", 
    Feb: "1000", 
    Mar: "1000", 
    Apr: "1000", 
    May: "1500", 
    Jun: "1500", 
    Jul: "1500", 
    Aug: "1500", 
    Sep: "1000", 
    Oct: "1000", 
    Nov: "1000", 
    Dec: "1000" 
    }, { 
    category: "Golf", 
    Jan: "3000", 
    Feb: "3000", 
    Mar: "3000", 
    Apr: "3000", 
    May: "5000", 
    Jun: "5000", 
    Jul: "5000", 
    Aug: "5000", 
    Sep: "5000", 
    Oct: "3000", 
    Nov: "3000", 
    Dec: "3000" 
    }], 
    monthList: { 
    1: "Jan", 
    2: "Feb", 
    3: "Mar", 
    4: "Apr", 
    5: "May", 
    6: "Jun", 
    7: "Jul", 
    8: "Aug", 
    9: "Sep", 
    10: "Oct", 
    11: "Nov", 
    12: "Dec" 
    } 
}; 

ich eine jsfiddle haben, die Dinge nach oben und zeigt legt fest, wie dies zu erreichen, indem Sie manuell eine <td> zu schaffen. Die <thead> Sektion hat <th> Elemente, die so erstellt wurden, wie ich die <td> Elemente im Körper der <table> erstellen möchte.

Jede Hilfe wäre am meisten geschätzt!

https://jsfiddle.net/gregorylmartin/1ynpk6rt/6/

Mein konkreter Anwendungsfall ist komplexer, natürlich. Aber das ist ein Konzept, das ich in dieser Anwendung ausgiebig wiederverwenden kann, sobald ich die Technik herausgefunden habe.

+1

Der einzige wirkliche probelm ist Sie konfrontiert sind, dass Sie Ihre eigenen Daten-Struktur, um etwas besser zu Lenker angepasst abzubilden müssen. Ändern Sie einfach Ihre Budget-Objekte in '{categoryName: Wert, Ausgaben: []}' Die Handhabung mit dem Lenker ist nicht, wo diese Logik getan werden sollte, wie Sie sagten, es ist ineffizient. Ich würde hinzufügen, dass es auch nicht Ihre Ansichten sind. Es sollte nicht viel über Ihre Daten wissen müssen. –

+0

Sebastian ist 100% richtig. Ich winzige JS-Schleife und meine Daten werden in ein Format umgewandelt, das besser für Lenker geeignet ist. Hier ist die überarbeitete Geige ... [https://jsfiddle.net/gregorylmartin/1ynpk6rt/7/](https://jsfiddle.net/gregorylmartin/1ynpk6rt/7/) – user3245690

+0

Ein wenig Helfer für noch mehr Funktionalität hinzugefügt . Ziemlich mächtiges Zeug ... [https://jsfiddle.net/gregorylmartin/1ynpk6rt/8/](https://jsfiddle.net/gregorylmartin/1ynpk6rt/8/) – user3245690

Antwort

0

Hier ist die Antwort unten sogar seit einem Jahr seit gefragt. Ich habe keinen Kommentar hinzugefügt, aber ich kann erklären, wenn ein zukünftiger Leser, der eine Antwort sucht, einen Kommentar macht, den er/sie benötigt. Glücklich, jeden zu kodieren!

$(document).ready(function() { 
 

 
    var data = { 
 
    categories: [{ 
 
     "name": "Rent", 
 
     "budget": { 
 
      "Jan": "300", 
 
      "Feb": "300", 
 
      "Mar": "300", 
 
      "Apr": "300", 
 
      "May": "300", 
 
      "Jun": "300", 
 
      "Jul": "300", 
 
      "Aug": "300", 
 
      "Sep": "300", 
 
      "Oct": "300", 
 
      "Nov": "300", 
 
      "Dec": "300" 
 
     } 
 
     }, 
 
     { 
 
     "name": "Utilities", 
 
     "budget": { 
 
      "Jan": "100", 
 
      "Feb": "100", 
 
      "Mar": "100", 
 
      "Apr": "100", 
 
      "May": "100", 
 
      "Jun": "100", 
 
      "Jul": "100", 
 
      "Aug": "100", 
 
      "Sep": "100", 
 
      "Oct": "100", 
 
      "Nov": "100", 
 
      "Dec": "100" 
 
     } 
 
     }, 
 
     { 
 
     "name": "Food", 
 
     "budget": { 
 
      "Jan": "400", 
 
      "Feb": "400", 
 
      "Mar": "400", 
 
      "Apr": "400", 
 
      "May": "400", 
 
      "Jun": "400", 
 
      "Jul": "400", 
 
      "Aug": "400", 
 
      "Sep": "400", 
 
      "Oct": "400", 
 
      "Nov": "400", 
 
      "Dec": "400" 
 
     } 
 
     }, 
 
     { 
 
     "name": "Beer", 
 
     "budget": { 
 
      "Jan": "1000", 
 
      "Feb": "1000", 
 
      "Mar": "1000", 
 
      "Apr": "1000", 
 
      "May": "1500", 
 
      "Jun": "1500", 
 
      "Jul": "1500", 
 
      "Aug": "1500", 
 
      "Sep": "1000", 
 
      "Oct": "1000", 
 
      "Nov": "1000", 
 
      "Dec": "1000" 
 
     } 
 
     }, 
 
     { 
 
     "name": "Golf", 
 
     "budget": { 
 
      "Jan": "3000", 
 
      "Feb": "3000", 
 
      "Mar": "3000", 
 
      "Apr": "3000", 
 
      "May": "5000", 
 
      "Jun": "5000", 
 
      "Jul": "5000", 
 
      "Aug": "5000", 
 
      "Sep": "5000", 
 
      "Oct": "3000", 
 
      "Nov": "3000", 
 
      "Dec": "3000" 
 
     } 
 
     } 
 
    ], 
 
    months: { 
 
     0: "Category", 
 
     1: "Jan", 
 
     2: "Feb", 
 
     3: "Mar", 
 
     4: "Apr", 
 
     5: "May", 
 
     6: "Jun", 
 
     7: "Jul", 
 
     8: "Aug", 
 
     9: "Sep", 
 
     10: "Oct", 
 
     11: "Nov", 
 
     12: "Dec" 
 
    } 
 
    }; 
 

 
    var tdData = document.getElementById("td-template").innerHTML; 
 
    var thData = document.getElementById("th-template").innerHTML; 
 

 
    var tdTemplate = Handlebars.compile(tdData); 
 
    var thTemplate = Handlebars.compile(thData); 
 

 
    var result1 = tdTemplate(data); 
 
    var result2 = thTemplate(data); 
 

 
    document.getElementById('tdBudget').innerHTML += result1; 
 
    document.getElementById('thBudget').innerHTML += result2; 
 

 
});
body { 
 
    font: 15px arial, sans-serif; 
 
} 
 

 
h1 { 
 
    margin: 0 0 10px 0; 
 
    padding: 5px; 
 
    font-size: 24px; 
 
    background-color: #999; 
 
    color: #fff; 
 
} 
 

 
table { 
 
    margin: 10px; 
 
} 
 

 
th, 
 
td { 
 
    padding: 5px; 
 
    border: 1px solid #999; 
 
} 
 

 
th { 
 
    background: #ccc; 
 
} 
 

 
tr:nth-child(odd) { 
 
    background: #eee; 
 
} 
 

 
td a { 
 
    color: #000; 
 
    text-decoration: underline; 
 
} 
 

 
.numbers { 
 
    text-align: right; 
 
}
<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.6/handlebars.js"></script> 
 

 
<script id="th-template" type="text/x-handlebars-template"> 
 
    {{#each months}} 
 
    <th class='centered'>{{this}}</th> 
 
    {{/each}} 
 
</script> 
 

 
<script id="td-template" type="text/x-handlebars-template"> 
 
    {{#each categories}} 
 
    <tr> 
 
    <td class='numbers'>{{this.name}}</td> 
 
    <td class="numbers">{{this.budget.Jan}}</td> 
 
    <td class="numbers">{{this.budget.Feb}}</td> 
 
    <td class="numbers">{{this.budget.Mar}}</td> 
 
    <td class="numbers">{{this.budget.Apr}}</td> 
 
    <td class="numbers">{{this.budget.May}}</td> 
 
    <td class="numbers">{{this.budget.Jun}}</td> 
 
    <td class="numbers">{{this.budget.Jul}}</td> 
 
    <td class="numbers">{{this.budget.Aug}}</td> 
 
    <td class="numbers">{{this.budget.Sep}}</td> 
 
    <td class="numbers">{{this.budget.Oct}}</td> 
 
    <td class="numbers">{{this.budget.Nov}}</td> 
 
    <td class="numbers">{{this.budget.Dec}}</td> 
 
    </tr> 
 
    {{/each}} 
 
</script> 
 

 
<div class="container"> 
 
    <div class="row clearfix"> 
 
    <div class="col-xs-offset-1 col-xs-10 col-sm-offset-1 col-sm-10 col-md-offset-1 col-md-10 col-lg-offset-1 col-lg-10"> 
 
     <table class="table"> 
 
     <thead> 
 
      <tr id="thBudget"> 
 
      </tr> 
 
     </thead> 
 
     <tbody class="centered" id="tdBudget"> 
 
     </tbody> 
 
     </table> 
 
    </div> 
 
    </div> 
 
</div>

Verwandte Themen