Ich benutze Lenker in meinem Projekt. Ich möchte nur das erste Element in einem Array anzeigen. Wie kann ich das machen?

<body> 

<!--This is our template. --> 
<!--Data will be inserted in its according place, replacing the brackets.--> 
<script id="t" type="text/x-handlebars"> 
    {{#each_when profile "gender" "female"}} 
     {{from}} ({{gender}})<br> 
    {{/each_when}} 
</script> 

<!--Your new content will be displayed in here--> 
<div class="content-placeholder"></div> 

<script> 
var json = { 
    "profile": [ 
     { "gender": "female", "from": "Olivia" }, 
     { "gender": "female", "from": "Meagen" }, 
     { "gender": "female", "from": "Aaron" }, 
     { "gender": "female", "from": "Aaron" } 
    ] 
}; 

Handlebars.registerHelper('each_when', function(list, k, v, opts) { 
    console.log(arguments); 
    var i, result = ''; 
    for(i = 0; i < list.length; ++i) 
     if(list[i][k] == v) 
      result = result + opts.fn(list[i]); 
    return result; 
}); 

Handlebars.registerHelper('get_length', function (obj) { 
return obj.length; 
}); 


var t = Handlebars.compile($('#t').html()); 
$('body').append(t(json)); 
</script> 
</body>

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<title>Page Title</title> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.js"></script> 
 
</head> 
 
<body> 
 

 
<!--This is our template. --> 
 
<!--Data will be inserted in its according place, replacing the brackets.--> 
 
<script id="t" type="text/x-handlebars"> 
 
    {{#each_when profile "gender" "female"}} 
 
     {{from}} ({{gender}})<br> 
 
    {{/each_when}} 
 
</script> 
 

 
<!--Your new content will be displayed in here--> 
 
<div class="content-placeholder"></div> 
 

 
<script> 
 
var json = { 
 
    "profile": [ 
 
     { "gender": "female", "from": "Olivia" }, 
 
     { "gender": "female", "from": "Meagen" }, 
 
     { "gender": "female", "from": "Aaron" }, 
 
     { "gender": "female", "from": "Aaron" } 
 
    ] 
 
}; 
 

 
Handlebars.registerHelper('each_when', function(list, k, v, opts) { 
 
    console.log(arguments); 
 
    var i, result = ''; 
 
    for(i = 0; i < list.length; ++i) 
 
     if(list[i][k] == v) 
 
      result = result + opts.fn(list[i]); 
 
    return result; 
 
}); 
 

 
Handlebars.registerHelper('get_length', function (obj) { 
 
return obj.length; 
 
}); 
 

 

 
var t = Handlebars.compile($('#t').html()); 
 
$('body').append(t(json)); 
 
</script> 
 
</body> 
 
</html>

Ergebnis:

Olivia (weiblich)
Meagen (weiblich)
Aaron (weiblich)
Aaron (weiblich)

aber ich möchte nur erste:

Olivia (weiblich)

Auch ich bin mit {{}} @index den Array-Index zu zeigen, aber es funktioniert nicht für mich. Fehle ich etwas?

Quelle

2017-02-18 Rehaan Kkhaan

Sie sagen, Sie verwenden {{@index}}, aber in Ihrem Code sehe ich es nicht. Fehle ich etwas? – 76484

Soll das erste Element im Array _after_ nach "females" oder _before_ gefiltert werden? – 76484

Ja Ich möchte das erste Element im Array, nachdem es gefiltert wird –

Helfer ändern:

Handlebars.registerHelper('each_when', function(list, k, v, opts) { 
    var match = list.findIndex(function(item) { 
    return (item[k] === v); 
    }); 
    return (match >= 0) ? opts.fn(list[match]) : ''; 
});

Sie wollen das erste Spiel zu finden und die Ergebnisse nur für dieses Spiel zurückzukehren.

Hier ist die volle HTML nur das erste Spiel zu zeigen, arbeiten:

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>Page Title</title> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.js"></script> 
 
</head> 
 
<body> 
 

 
<!--This is our template. --> 
 
<!--Data will be inserted in its according place, replacing the brackets.--> 
 
<script id="t" type="text/x-handlebars"> 
 
    {{#each_when profile "gender" "female"}} 
 
    {{from}} ({{gender}})<br> 
 
    {{/each_when}} 
 
</script> 
 

 
<!--Your new content will be displayed in here--> 
 
<div class="content-placeholder"></div> 
 

 
<script> 
 
    var json = { 
 
     "profile": [ 
 
      { "gender": "female", "from": "Olivia" }, 
 
      { "gender": "female", "from": "Meagen" }, 
 
      { "gender": "male", "from": "Aaron" }, 
 
      { "gender": "male", "from": "Aaron" } 
 
     ] 
 
    }; 
 

 
    Handlebars.registerHelper('each_when', function(list, k, v, opts) { 
 
     var match = list.findIndex(function(item) { 
 
      return (item[k] === v); 
 
     }); 
 
     return (match >= 0) ? opts.fn(list[match]) : ''; 
 
    }); 
 

 
    Handlebars.registerHelper('get_length', function (obj) { 
 
     return obj.length; 
 
    }); 
 

 

 
    var t = Handlebars.compile($('#t').html()); 
 
    $('body').append(t(json)); 
 
</script> 
 
</body> 
 
</html>

EDITED MIT ANTRAG KOMMENTAR zu ERWEITERN:

Um die erste Person für jedes einzelnes Geschlecht zu bekommen Sie könnten einen weiteren Helfer hinzufügen:

Handlebars.registerHelper('each_unique', function(list, k, opts) { 
    var foundKeys = {}, 
    results = ''; 
    list.forEach(function(item) { 
    if (!foundKeys[item[k]]) { 
     results = results + opts.fn(item); 
     foundKeys[item[k]] = true; 
    } 
    }); 
    return results; 
});

Um dies zu verwenden, probieren Sie dieses überarbeitete Beispiel (es hat Beispiele, die durch gender einzigartig und einzigartig durch from zeigen.

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<title>Page Title</title> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.js"></script> 
 
    </head> 
 
    <body> 
 

 
    <!--This is our template. --> 
 
<!--Data will be inserted in its according place, replacing the brackets.--> 
 
<script id="t" type="text/x-handlebars"> 
 
    <p>With 'each_when':</p> 
 
    {{#each_when profile "gender" "female"}} 
 
    {{from}} ({{gender}})<br> 
 
    {{/each_when}} 
 
    <hr/> 
 
    <p>With 'each_unique' on gender:</p> 
 
    {{#each_unique profile "gender"}} 
 
    {{from}} ({{gender}})<br> 
 
    {{/each_unique}} 
 
    <hr/> 
 
    <p>With 'each_unique' on from:</p> 
 
    {{#each_unique profile "from"}} 
 
    {{from}} ({{gender}})<br> 
 
    {{/each_unique}} 
 
</script> 
 

 
<!--Your new content will be displayed in here--> 
 
<div class="content-placeholder"></div> 
 

 
    <script> 
 
var json = { 
 
    "profile": [ 
 
    { "gender": "female", "from": "Olivia" }, 
 
    { "gender": "female", "from": "Meagen" }, 
 
    { "gender": "male", "from": "Aaron" }, 
 
    { "gender": "male", "from": "Aaron" } 
 
    ] 
 
}; 
 

 
Handlebars.registerHelper('each_when', function(list, k, v, opts) { 
 
    var match = list.findIndex(function(item) { 
 
    return (item[k] === v); 
 
    }); 
 
    return (match >= 0) ? opts.fn(list[match]) : ''; 
 
}); 
 

 
Handlebars.registerHelper('get_length', function (obj) { 
 
    return obj.length; 
 
}); 
 

 
Handlebars.registerHelper('each_unique', function(list, k, opts) { 
 
    var foundKeys = {}, 
 
    results = ''; 
 
    list.forEach(function(item) { 
 
    if (!foundKeys[item[k]]) { 
 
     results = results + opts.fn(item); 
 
     foundKeys[item[k]] = true; 
 
    } 
 
    }); 
 
    return results; 
 
}); 
 

 
var t = Handlebars.compile($('#t').html()); 
 
$('body').append(t(json)); 
 
</script> 
 
</body> 
 
</html>

Der each_unique Helfer ist ein wenig komplexe, dass wir verfolgen haben, wenn wir noch auf diesem Schlüsselwert berichtet. Dazu stellen wir ein Objekt foundKeys zur Verfügung, das jeden gefundenen eindeutigen Schlüsselwert aufzeichnet und verhindert, dass weitere Ergebnisse mit demselben Schlüsselwert bei nachfolgenden Iterationen über die forEach() eingefügt werden.

Quelle

2017-02-19 01:56:06 rasmeister

danke 'rasmeister'. –

Ich habe noch eine Frage aus dem gleichen Kontext. Was passiert, wenn ich nicht nach "männlichem" und "weiblichem" Geschlecht suche? Ich möchte das vollständige Array anzeigen und möchte das Array nicht wiederholen. Ich möchte sagen, ich möchte nur das erste Auftreten von jedem Array zeigen. zum Beispiel ** Olivia (weiblich) ** und ** Aaron (männlich) ** nur. –

Ich habe meine Antwort aktualisiert, um Ihre weitere Frage zu reflektieren. Außerdem habe ich eine leichte Verbesserung gegenüber dem 'each_when'-Handler gemacht, den ich vorher bereitgestellt habe (sauberer Code). – rasmeister

Ich benutze Lenker in meinem Projekt. Ich möchte nur das erste Element in einem Array anzeigen. Wie kann ich das machen?

Antwort

Verwandte Themen