2016-05-19 1 views
0

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, 
    }; 
}); 
+0

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. –

+0

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

Répondre

1

regard sur la documentation officielle. Vous êtes autorisé à transmettre le contexte de données avec le modèle.

Meteor Docs for template data context

+0

Fournir un exemple et une explication aidera OP, au lieu de simplement un lien vers un fichier doc. –

+0

J'aurais fait un exemple de code si j'étais sûr du contexte de données. La fonction 'getItems()' vient de nulle part. C'est pourquoi vient de pointer vers le guide. –

+0

getItems() est juste l'appel AJAX qui retourne un tableau avec N nombre d'objets. – Edgar