Comment puis-je ajouter un séparateur entre les éléments de {{#chaque}} boucle sauf après le dernier élément?

J'ai un Guidon modèle où j'essaie de générer une liste séparée par des virgules des éléments d'un tableau.

Dans mon Guidon modèle:

{{#each list}}
    {{name}} {{status}},
{{/each}}

Je veux le , à ne pas apparaître sur le dernier élément. Est-il un moyen de le faire dans le Guidon ou dois-je revenir à des sélecteurs CSS?

Mise à JOUR: sur la Base de Christopher, suggestion, c'est ce que j'ai fini la mise en œuvre:

var attachments = Ember.CollectionView.extend({
    content: [],
    itemViewClass: Ember.View.extend({
        templateName: 'attachments',
        tagName: 'span',
        isLastItem: function() {
            return this.getPath('parentView.content.lastObject') == this.get('content');
        }.property('parentView.content.lastObject').cacheable()
    })
}));

et de mon point de vue:

{{collection attachments}}

et la vue de l'article:

{{content.title}} ({{content.size}}) {{#unless isLastItem}}, {{/unless}}

Une autre chose que j'ai trouvé est que si vous supprimez le dernier élément, vous devez forcer un renouvellement de chaque élément à supprimer le dernier séparateur. Par défaut suppression d'un élément semble être la seule à supprimer de l'affichage de cet élément et les autres ne sont pas mis à jour (ce qui est logique).

InformationsquelleAutor Chris Thompson | 2012-05-01

51

Vous pouvez utiliser les CSS pour ce faire:
```
li:after {
    content: ',';
}

li:last-of-type:after {
    content: '';
}
```
Je préfère des règles distinctes, mais d'une façon plus concise si un peu moins lisible que la version (de @Jay dans les commentaires):
```
li:not(:last-of-type):after {
    content: ',';
}
```
- Je l'ai regardé en dernier enfant et si elle fonctionne bien, sauf pour le fait qu'il n'est pas pris en charge dans IE8. Je vais donner à la propriété calculée d'un coup. Il semble toujours étrange pour moi qu'il n'y a pas de moyen de faire une liste délimitée par des virgules.
- Plutôt que d'utiliser :after et last-child, vous pouvez utiliser li + li:before, faisant de cette solidement IE8-preuve (n'oubliez pas de le mettre dans conforme aux normes mode de rendu!)
- C'est parfait! Je suis en utilisant ce avec Mustache.js modèles, mais je n'ai pas trouver ce jusqu'à ce que je commencé à regarder autour pour un remplacement (que j'ai maintenant n'avez pas besoin!).
- J'ai édité la réponse ci-dessous, peut-être que vous devriez intégrer cette nouvelle syntaxe dans votre réponse, vous aussi.
- .li:not(:last-of-type):after fonctionné pour moi 🙂
- J'ai édité pour enlever l'ancien crufty de base. Si vous êtes encore à se soucier de IE8... dieu avoir pitié de votre âme. Je préfère encore l'explicite des règles distinctes, mais à chacun son/sa propre.
- Même si cela n'résoudre le problème, il ne répond pas à la question.
InformationsquelleAutor Christopher Swasey
122

Je sais je suis en retard pour les pièces mais j'ai trouvé un WAYYYY méthode la plus simple
```
{{#unless @last}},{{/unless}}
```
- C'est le seul
- Ce n'est PAS le seul si vous êtes à l'aide de Braise du guidon.
- Je ne suis pas à l'aide de Braise, mais je suis tombé sur ce fil de discussion lors de la recherche d'un moyen de le faire et il fonctionne parfaitement. Merci!
- Oui, cela fonctionne comme un charme avec handlebarsjs.
- Parfait! Merci beaucoup.
- Sur une note similaire: {{#if @index}},{{/if}} stackoverflow.com/a/20575093/923745 -- devrait travailler avec les Braises.
- Ce n'est un gagnant
- fonctionne parfaitement dans jsreport guidon moteur si vous migth merveille
- Ce doit être la accepté de répondre à
InformationsquelleAutor MylesBorins
58

Depuis Braise v1.11 vous êtes en mesure d'obtenir l'indice de chacun à l'aide de paramètres de bloc. Dans votre cas, cela ressemblerait à quelque chose comme ceci:
```
{{#each list as |item index|}}
    {{if index ", "}}{{item.name}} {{item.status}}
{{/each}}
```
La première index valeur sera 0 qui permettra d'évaluer à false et ne sera pas ajouté, toutes les valeurs d'évaluer à true qui ajoute un séparateur.
- Ce n'est pas compatible avec la question. Vous obtenez toujours une virgule dans le dernier élément...
- À cet effet, il vient avant le contenu d'un élément.
- ouais, je ne sais pas ce que je pensais. maintenant que im lire le code à nouveau, il fait complètement sens
InformationsquelleAutor Nahkala
5

Je me rends compte c'est d'un an mais j'ai eu un problème similaire et s'est retrouvé ici. Dans mon cas, j'ai été réellement affaire à un tableau. Donc, voici ma solution.
```
Handlebars.registerHelper('csv', function(items, options) {
    return options.fn(items.join(', '));
});

//then your template would be
{{#csv list}}{{this}}{{/csv}}
```
J'allais pour une solution simple et élégante qui maintient le csv logique dans le modèle.

InformationsquelleAutor freak3dot

J'ai créé sep bloc helper:

Handlebars.registerHelper("sep", function(options){
    if(options.data.last) {
        return options.inverse();
    } else {
        return options.fn();
    }
});

Utilisation:

{{#each Data}}
   {{Text}}{{#sep}},{{/sep}}
{{/each}}

Prend en charge else.

InformationsquelleAutor Jadro007

4

Avec ember 2.7 vous pouvez le faire après l'installation de ember-truth-helpers:
```
ember install ember-truth-helpers
```
et puis, votre modèle doit ressembler à cela:
```
{{#each model as |e|}}
    {{e}}{{#unless (eq e model.lastObject)}}, {{/unless}}
{{/each}}
```
InformationsquelleAutor albertjan

J'ai eu ce travail avec une version modifiée de freak3dot réponse:

handlebars.registerHelper('csv', function(items, options) {
  return items.map(function(item) {
    return options.fn(item)
  }).join(', ')
})

(Ce qui est un nœud de l'application, afin de modifier le map en conséquence, afin de souligner ou quoi que si vous êtes en train de construire dans le navigateur)

Permet la mise en forme des objets entre chaque virgule:

{{#csv players}
  {{firstName}} {{lastName}}
{{/csv}}

Edit: Voici une version plus souple. Joindre une liste de choses sur l'arbitraire d'un séparateur.

handlebars.registerHelper('join', function(items, separator, options) {
  return items.map(function(item) {
    return options.fn(item)
  }).join(separator)
})

Et modèle:

{{#join players ' vs '}
  {{firstName}} {{lastName}}
{{/join}}

InformationsquelleAutor mmacaulay

Peut-être de ce contexte, vous devriez être en train de créer une vue pour la collection, une itération de point de vue sur les objets de membre. Dans ce cas, un Guidon itérateur est exagéré. Dans mon exemple ci-dessous, les modifications du nom ou prénom sur les objets de la Personne est lié à la liste et mettre à jour la vue.

Modèle:

{{App.listController.csv}}

Javascript:

App = Ember.Application.create();

var Person = Ember.Object.extend({
    firstName: null,
    lastName: null
});

var bob = Person.create({
    firstName: "bob",
    lastName: "smith"
});

var ann = Person.create({
    firstName: "ann",
    lastName: "doe"
});

App.listController = Ember.Object.create({
    list: [bob, ann],
    csv: Ember.computed(function () {
        var arr = [];
        this.get('list').forEach(function (item, index, self) {
            arr.push(item.firstName + ' ' + item.lastName);
        })
        return arr.join(',');
        }).property('[email protected]', '[email protected]')
});
//any changes to bob or ann will update the view
bob.set('firstName', 'tim');
//adding or removing from the array will update the view
App.listController.get('list').pushObject(Person.create(firstName: "Jack", lastName:"Dunn"});

Ci-dessous est ma réponse originale à cette question, qui n'a pas fonctionné pour ce contexte.

Vous devriez être en mesure de le faire avec un helper:

Handlebars.registerHelper('csv', function(items, options) {
  var out = "";
  for(var i=0, l=items.length; i<l; i++) {
    out += options.fn(items[i]);
    if (i < l - 1) {
        out += ',';
    }
    //might want to add a newline char or something
  } 
  return out;
});

//then your template would be
{{#csv list}} {{name}} {{status}} {{/each}}

Malheureusement cela ne fonctionne pas comme-est avec la liaison de données dans Ember.js.
Avez-vous essayé un attribut calculé?
J'ai fini par faire quelque chose de semblable à cela, mais à l'aide de la Ember.js ContainerView qui prend en charge un Guidon modèle par élément, puis d'une propriété calculée qui dit que si l'élément courant est le dernier élément dans la liste ou pas. Voir ma réponse mis à jour. Cela ressemble à une bonne option si vous n'avez pas besoin d'utiliser une fantaisie modèle HTML (comme je fais).
J'aime votre façon de mieux. Merci pour la mise à jour.

InformationsquelleAutor hellslam

Vous devez vous connecter pour publier un commentaire.