LENKER if-Anweisung mit index = Wert

Ich versuche eine Tabelle erstellen, füllt jede Zelle in der Tabelle mit einem Objekt aus einer JSON-Datei. Mein LENKER Vorlage fügt nur ein mit den Daten für jedes Objekt. Was ich versuche zu erreichen ist für jedes 5. Element eine neue Zeile angelegt und dann geht es weiter füllen sich die Zellen der Tabelle, bis die 10-item erstellt dann eine neue Zeile etc.

Ich gelesen habe, bis auf @index. Gibt es eine Funktion, die so etwas wie {{#if @index /5 == 0}} ? Ansonsten ist es etwas, LENKER-Angebote, die erreichen konnten, die Funktionalität, die ich versuche zu tun? Ich bin nicht beschränkt, eine Tabelle zu verwenden, ich dachte nur, dass war die beste option, um die Daten abzulegen.

Meine aktuelle Vorlage. Vielen Dank für jede Hilfe!!! Ich bearbeitet diese unten mit einem LENKER Helfer. Die Informationen sind aber noch nicht machen. Es ist ein weiterer code, der kompiliert die Vorlage nach dem Ende dieser enthält jedoch eine sehr lange json-array in der lokalen Datei zum testen.

<script type = "text/x-handlebars-template" id="itemTemplate">
    <table class="tableStyle">
        <tr>
            {{#each all_coupons}}
                {{#ifPos}}
                <tr>
                    <td>    
                        <div class="wrapper">
                            <div class="header">{{coupon_title}}</div>              
                            <div class="column_wrapper">
                                <div class="two-col">
                                          <div class="product_image"><img src="{{coupon_thumb}}" alt="Apple" height="110" width="110"></div>
                                          <div class="description">{{coupon_description}}</div>
                               </div>
                            </div>
                            <div class="expiration">Valid From: {{valid_from}} to {{valid_to}}</div>    
                        </div>
                    </td>
                </tr>
                {{else}}
                    <td>    
                        <div class="wrapper">
                            <div class="header">{{coupon_title}}</div>              
                            <div class="column_wrapper">
                                <div class="two-col">
                                          <div class="product_image"><img src="{{coupon_thumb}}" alt="Apple" height="110" width="110"></div>
                                          <div class="description">{{coupon_description}}</div>
                               </div>
                            </div>
                            <div class="expiration">Valid From: {{valid_from}} to {{valid_to}}</div>    
                        </div>
                    </td>
                {{/ifPos}}
            {{/each}}
        </tr>
    <table>
</script>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/handlebars.js"></script>
<script type="text/javascript" src-"js/handlebars.runtime-v1.3.0.js"></script>

<script type="text/javascript">

Handlebars.registerHelper('ifPos', function (context, options) {
    var pos = false;

    for (var i = 0, j = context.length; i < j; i++) {
        if (context.length/5 == 0) 
        {
            pos = true;
        }
        else {
            pos = false;
        }
    }
    console.log(pos);
    return pos;
});

InformationsquelleAutor Trevor | 2014-06-20

  1. 13
    context.length/5 == 0

    wird nicht geben Sie den Wert, den Sie wollen, dass jeder 5. element. Als 5/5 1 ist, besser zu nutzen, modulo (%), die gibt dir den Rest, auf diese Weise, wenn es gleich 0 ist, Sie wissen, es hat sich in Sie ganz.

    Auch, wenn Sie wollen, um Ihren eigenen if/else-block handle bars bietet Ihnen Optionen.fn und Optionen.inverse. Return options.fn(//oder was auch immer Sie wollen, zu passieren, um den if-block) oder Optionen.inverse(//was immer der else-block) von den Helfer gehen in den für Sie relevanten Teil des Blocks.

    Hier ist ein code-Stift zeigt ein kurzes Beispiel, wie könnte man die Indexposition des Elements, die Sie Durchlaufen und anwenden eine styling-Grundlage.
    Die helper-Funktionen gehen Sie zu der true-Teil des if-Blocks, wenn der index % 3 0 (der erste, weil es einen 0-basierten index, und dann jeden 3. element. Alle anderen Zeiten wird es gehen, um die anderen

    Helfer

    Handlebars.registerHelper('ifThird', function (index, options) {
   if(index%3 == 0){
      return options.fn(this);
   } else {
      return options.inverse(this);
   }

});

    Vorlage

    <script id="template" type="text/x-handlebars-template">

      {{#each this}}
      <p class="{{#ifThird @index}}
                  red
                {{else}}
                  blue
                {{/ifThird}}">{{@index}} - {{name}}</p>
      {{/each}}

</script>

    InformationsquelleAutor Quince

Schreibe einen Kommentar