Date de publication:
Commentaires:0

Alors j’ai essayé d’utiliser ‘bootstrapDualListbox’ dans mon projet.
Pour cela il fallait que j’exécute la fonction d’accroche une fois la liste chargée. J’ai découvert que Blaze, le templater de meteor permettait de récupérer l’index, le premier et le dernier élément d’un each. Mais en fait ils l’avaient déjà enlevé au moment ou je voulais l’utiliser…

Comment solutionner cette histoire?

Bon la technique pour imiter ça:
C’est de mettre au chargement de la liste un marqueur ‘lastItem’ sur le dernier éléments de la liste et de déplacer les ‘item’ dans un template différents. Lorsqu’on pop le dernier éléments onRendered lors de la boucle, on exécute la fonction désirée.

Dans mon « elements.js »

Template.elementsList.helpers({
	elements: function(){
		var elements = Elements.find().fetch();
		elements [elements .length - 1].lastItem = true;
		return elements;
	}
});

Template.elementsItem.onRendered(function(){
	if(this.data.lastItem){
		$('.duallistbox').bootstrapDualListbox({
			selectedListLabel: 'selected',
			preserveSelectionOnMove: 'moved',
			moveOnSelect: false,
		});
  	}
});

Dans mon « elements.html »

<template name="elementsList">
	<select multiple name="elements" class="form-control duallistbox">
		{{#each elements}}
			{{>elementsItem}}
		{{/each}}
	</select>
</template>

<template name="elementsItem">
	<option value="{{_id}}" >{{title}}</option>
</template>

Bon même si c’est un peu tricky, ça dépanne plutôt pas mal.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Vous seriez intéressé par: