Meteor: Initing-Funktion (Karussell) nach Daten wurde geschleift

Ich versuche, Arbeit Flickity Carousel machen, indem Sie in Blaze Helpers initing. Ich folgende Fehler haben:Meteor: Initing-Funktion (Karussell) nach Daten wurde geschleift

Exception in template helper: TypeError: $(...).flickity is not a function

Hier ist mein Helfer für das Karussell Vorlage:

Template.carouselTemplate.onCreated(function bodyOnCreated() { 
    this.state = new ReactiveDict(); 
    Meteor.subscribe('albums'); 
}) 

Template.carouselTemplate.helpers({ 
    albums() { 
    return Albums.find({}); 
    }, 
    initializeCarousel() { 
    $('.carousel').flickity({ 
     // options 
     "lazyLoad": true 
    }); 
    } 
});

Und die Vorlage selbst:

<template name='carouselTemplate'> 

<div class="carousel"> 

    {{#each albums}} 
    <div class="carousel-cell"> 
    <img src={{cover}} alt="cat nose" /> 
    </div> 
    {{/each}} 
    {{initializeCarousel}} 

</div> 

<template />

PS: Ich bin offen für andere Wege, um das zu schaffen.

Quelle

2016-08-08 volna

Bitte stellen Sie sicher, dass Sie die js-Bibliothek für 'flickity' über das' vijayP

@vijayP danke für den Vorschlag, ich habe recheked und sie sind in Head-Tag. – volna

dann überprüfen Sie bitte die Reihenfolge der Skript-Tags. Z.B. - JQuery sollte zuerst und dann flickity.js sein. Bitte bestätigen Sie das. – vijayP

Zuerst sicherstellen, dass Sie mit der Flickity Bibliothek eine der folgenden Optionen:

1) den richtigen JS Bezug zu Ihrer Anwendung hinzufügen. Zum Beispiel:

/client/main.html

<head> 
    <script src="https://npmcdn.com/[email protected]/dist/flickity.pkgd.min.js"></script> 
</head>

ODER

2) eine Kopie der Flickity Bibliothek in Ihre Anwendung einbetten. Um dies zu tun, würden Sie eine Kopie der flickity.pkgd.js Datei in Ihrem Anwendungen /client/compatibility Verzeichnis (siehe Special directories Abschnitt des Leitfadens für weitere Informationen) speichern.

ODER

3) Wenn Meteor 1.3+ verwenden, um die Bibliothek installieren npm mit: meteor npm install --save flickity

Sobald die Bibliothek installiert ist, anstelle der Initialisierung Ihr Karussell durch eine Template-Helfer, bewegen Sie Ihren Initialisierungscode in eine Vorlage onRendered Rückruf. Innerhalb dieses Callbacks wickeln Sie Ihre Flickitätsinitialisierung in Tracker.autorun ein, um sicherzustellen, dass die Albums Ergebnisse zuerst geladen werden. Etwas wie:

Template.carouselTemplate.onCreated(function bodyOnCreated() { 
    this.state = new ReactiveDict(); 
    Meteor.subscribe('albums'); 
}); 

Template.carouselTemplate.onRendered(function onRendered() { 
    this.autorun(() => { 
    if (Albums.find().count()) { 
     $('.carousel').flickity(); 
    } 
    }); 
}); 

Template.carouselTemplate.helpers({ 
    albums() { 
    return Albums.find({}); 
    } 
});

es durch einen onRendered Rückruf aufrufen bedeutet, wird es aufgerufen werden, nachdem die Vorlage fertig ist und in das DOM eingefügt (die für jquery Bibliotheken benötigt, die das DOM manipulieren). Sie können dann den initializeCarousel Anruf von Ihrem Template entfernen.

Quelle

2016-08-08 13:45:44 hwillson

danke das hat die Initialisierung behoben. Aber es gibt noch ein Problem, das ich nicht herausfinden kann, ist, dass Karussell-Zellen divs außerhalb des div Sliders geladen werden. https://postimg.org/image/i4flwkq6j/ – volna

@AdrianSoleil Ich habe mein Beispiel aktualisiert, um Ihnen zu zeigen, wie man das anspricht; Sie initialisieren, bevor die Alben-Ergebnisse geladen wurden. Wenn Sie in Ihrem OnRendered-Rückruf "autorun" verwenden, wird dies behoben. – hwillson

Meteor: Initing-Funktion (Karussell) nach Daten wurde geschleift

Antwort

Verwandte Themen