javascript - hbs - ¿Cómo agrego un separador entre elementos en un ciclo{{#each}} excepto después del último elemento?

npm js handlebars

Question

Tengo una plantilla de manubrios donde intento generar una lista de elementos separados por comas de una matriz.

En mi plantilla de manubrios:

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

Quiero que no aparezca en el último artículo. ¿Hay alguna manera de hacer esto en los manillares o necesito recurrir a los selectores de CSS?

ACTUALIZACIÓN : de acuerdo con la sugerencia de Christopher, esto es lo que terminé implementando:

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()
    })
}));

y en mi opinión:

{{collection attachments}}

y la vista del elemento:

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

Answer 1

Con ember 2.7 puede hacer esto después de instalar ember-truth-helpers :

ember install ember-truth-helpers

y luego tu plantilla se verá así:

{{#each model as |e|}}
    {{e}}{{#unless (eq e model.lastObject)}}, {{/unless}}
{{/each}}

Answer 2

Desde Ember v1.11 puede obtener el índice de cada uno de los parámetros de bloque de uso. En tu caso, esto se vería así:

{{#each list as |item index|}}
    {{if index ", "}}{{item.name}} {{item.status}}
{{/each}}

El primer valor de index será 0 que se evaluará como false y no se agregará, todos los valores posteriores se evaluarán como true lo que antepondrá a un separador.

Answer 3

He creado sep bloque helper:

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

Uso:

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

Apoya la declaración else.

Answer 4

Lo hice trabajando con una versión modificada de la respuesta de freak3dot:

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

(Esta es una aplicación de nodo, por lo tanto, cambie el map acuerdo con el guión bajo o lo que sea si está compilando en el navegador)

Permite formatear objetos entre cada coma:

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

Editar: Aquí hay una versión más flexible. Únase a una lista de cosas en un separador arbitrario.

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

Y plantilla:

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

Answer 5

Me doy cuenta de que tiene un año pero tuve un problema similar y terminé aquí. En mi caso, en realidad estaba lidiando con una matriz. Entonces, aquí está mi solución.

Handlebars.registerHelper(''csv'', function(items, options) {
    return options.fn(items.join('', ''));
});

// then your template would be
{{#csv list}}{{this}}{{/csv}}

Iba a buscar una solución simple y elegante que mantenga la lógica csv en la plantilla.

Answer 6

Puede usar CSS estándar para hacer esto:

li:after {
    content: '','';
}

li:last-of-type:after {
    content: '''';
}

Prefiero reglas separadas, pero una versión más concisa, aunque menos legible (de @Jay en los comentarios):

li:not(:last-of-type):after {
    content: '','';
}

Answer 7

Sé que llego tarde a las partes, pero encontré un método WAYYYY más simple

{{#unless @last}},{{/unless}}

Answer 8

Tal vez para este contexto, debería crear una vista para la colección, no una iteración de vistas en los elementos miembros. En este caso, un iterador de manillar es excesivo. En mi ejemplo a continuación, los cambios a firstName o lastName en los objetos Person se vincularán a la lista y actualizarán la vista.

Modelo:

{{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"});

A continuación está mi respuesta original, que no funcionó en este contexto.

Deberías poder hacer esto con un ayudante:

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}}