J'ai un modèle virtualList
que je veux réutiliser avec des données différentes (virtList.items
). Comment puis-je le rendre abstrait à une donnée, c'est-à-dire le faire se comporter davantage comme un module?Meteor.js Réutiliser le modèle avec différentes données
virtList.js:
// imports {..};
const virtList = {};
Template.virtualList.onCreated(() => {
virtList.items = getItems();
virtList.itemsAmount = virtList.items.length;
virtList.itemHeight = 40;
Session.set("startIndex", 0);
Session.set("endIndex", 0);
});
Template.virtualList.onRendered(() => {
virtList.containerHeight = $('.list__container').height();
virtList.scrollerHeight = virtList.itemsAmount * virtList.itemHeight;
Session.set("endIndex", virtList.containerHeight/virtList.itemHeight);
$('.list__scroller').css({
'height': virtList.scrollerHeight
});
});
Template.virtualList.helpers({
items:() => visibleItems(Session.get("startIndex"), Session.get("endIndex")),
});
Template.virtualList.events({
"scroll .list__container" (event, template) {
const target = event.target;
virtList.scrollOffset = $(target).scrollTop();
virtList.startOffset =() => Math.abs(virtList.scrollOffset/virtList.itemHeight);
virtList.endOffset =() => Math.abs(virtList.scrollOffset + virtList.containerHeight)/virtList.itemHeight;
virtList.startIndex =() => Math.floor(virtList.startOffset());
virtList.endIndex =() => Math.ceil(virtList.endOffset());
Session.set("startIndex", virtList.startIndex());
Session.set("endIndex", virtList.endIndex());
}
});
const visibleItems = (startIndex, endIndex) => virtList.items.slice(startIndex, endIndex).map((element, i) => {
let index = i + startIndex;
let top = (virtList.itemHeight * index);
return {
name: element.name,
style: top,
};
});
Vous pouvez réutiliser le modèle où vous voulez. Vous pouvez modifier le contexte de données en utilisant ['# with'] (http://guide.meteor.com/blaze.html#builtin-block-helpers) lorsque vous réutilisez le modèle. –
Je pense que mon problème est que j'ai un bordel dans 'virtList.js'. Peut-être pourriez-vous m'aider à mieux organiser mon code? Pour pouvoir l'utiliser avec l'assistant '# with '. – Edgar