2016-05-19 10 views
0

virtualListテンプレートを別のデータ(virtList.items)で再利用したいのですが。どのようにデータに抽象化することができますか?つまり、モジュールのように動作しますか?Meteor.js異なるデータのテンプレートを再利用する

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

あなたは、テンプレートを再利用することができます。テンプレートを再利用するときは、['#with'](http://guide.meteor.com/blaze.html#builtin-block-helpers)を使ってデータコンテキストを変更することができます。 –

+0

私の問題は、virtList.jsに混乱があることだと思います。私のコードを整理するのに役立つかもしれませんか? '#with'ヘルパーでそれを使用できるようにする。 – Edgar

答えて

1

は、公式ドキュメントを見てください。テンプレートとともにデータコンテキストを渡すことができます。あなたが好きな場所

Meteor Docs for template data context

+0

例と説明を提供すると、docファイルへの単なるリンクではなくOPに役立ちます。 –

+0

私はデータコンテキストについて確信があったらサンプルコードを作っていたでしょう。 'getItems()'関数はどこから来ていません。これがガイドに指摘された理由です。 –

+0

getItems()はN個のオブジェクトで配列を返すAJAX呼び出しです。 – Edgar

関連する問題