Bootstrap-Ereignis in Aurelia benutzerdefiniertes Attribut

Question

kann nicht beobachtet werden Ich arbeite daran, einen JavaScript-Ereigniskalender namens FullCalendar in eine Aurelia App zu integrieren. Ich habe ein Standard-Aurelia-Modul namens dashboard und habe die Kalenderimplementierung in eine separate .js-Datei mit der Bezeichnung calendar.js gestellt und ein benutzerdefiniertes Attribut namens calendar erstellt. Ich verwende ein benutzerdefiniertes Attribut, da keine calendar Ansicht angehängt ist, alles wird in JavaScript generiert.

Da der Kalender beim Laden der Seite nicht sichtbar ist (weil er nicht auf der Registerkarte main oder active vorhanden ist), wird er nicht gezeichnet, wenn die Methode attached() im benutzerdefinierten Attributcode ausgelöst wird. Ich muss in der Lage sein, ein Bootstrap-Ereignis (Klicken auf die Registerkarte) aus dem benutzerdefinierten Attribut zu beobachten, um eine .render Methode auszulösen, um den Kalender zu zeichnen, wenn die Registerkarte schließlich geklickt wird.

sind hier relevant Schnipsel meines Codes:

dashboard.html:

<!-- Standard Bootstrap tabs --> 
<ul class="nav nav-tabs" role="tablist"> 
        <li role="presentation" class="active"><a href="#tab1" role="tab" data-toggle="tab">Projects</a></li> 
        <li role="presentation"><a href="#tab2" role="tab" data-toggle="tab" id="calselect">Calendar</a></li> 
        ... 
        ... 
<!-- and further down the same page, the tab panes with their content --> 
<div class="tab-content"> 
    <div role="tabpanel" class="tab-pane active" id="tab1"> 
     <!-- Table content here... --> 
    </div> 
    <div role="tabpanel" class="tab-pane" id="tab2"> 
     <div class="row"> 
      <div class="col-md-12"> 
       <div class="panel panel-white"> 
        <div class="panel-body"> 
         <div calendar calvisible.bind="calVisible"></div> 
        </div> 
       </div> 
      </div> 
     </div><!-- Row --> 
    </div> 
</div> 

dashboard.js:

... 
    constructor(http, dataRepository) { 
    this.http = http; 
    dataRepository.getProjects().then(projects => this.projects = projects); 
    this.calVisible = false; 
    }; 
... 
    attached(){ 
    var cal = document.getElementById('calselect'); 
     $(cal).on('shown.bs.tab', (e) => { 
     this.calVisible = true; 
     }); 
    }; 

calendar.js:

@bindable calvisible; 

Bootstrap löst ein Ereignis namens 'shown.bs.tab' aus, wenn auf eine Registerkarte geklickt wird. Die richtige Registerkarte wird von id="calselect" verwiesen. Wenn auf die Registerkarte geklickt wird, wird die gebundene Eigenschaft this.calVisible auf True gesetzt. Anschließend ist calvisible an die Datei calendar.js gebunden.

Es gibt zwei Probleme, die ich identifizieren kann. Erstens, aus der Sicht von calendar.js, existiert calvisible nicht, bis die Registerkarte angeklickt wird, wodurch Webpack sich beschweren, aber die App nicht zum Absturz bringt. Ich konnte das nicht mit einer if Aussage abfangen, und ich bin mir nicht sicher warum.

Zweitens, wenn die Registerkarte geklickt wird, auch wenn der Wert von calvisible zeigt true in der calendar.js Datei, ist es nicht ein Änderungsereignis auslösen, die ich dort beobachten kann, und das ist, was ich eine .render Methode feuern muß zeichne den Kalender. Ich habe versucht, @observable hier zu verwenden, war aber nicht in der Lage, es zu arbeiten, entweder. Was ist der richtige Ansatz?

Lösung -

Hier wird der Gewinncode auf @Fabio Luz beantworten unten basiert:

bind(){ 
    this.calvisible = this.calvisible; 
} 

calvisibleChanged(){ 
    $(this.element).fullCalendar('render'); 
} 

Answer 1

In dieser Situation, ich glaube, Sie anstelle eines benutzerdefinierten Attribut eines benutzerdefinierten-Element verwendet werden soll. Um das Problem des Fehlens einer Ansicht zu lösen, bietet Aurelia Ihnen die @noView Dekorateur, see the docs. Ihr Code würde etwa so aussehen:

Sie könnten immer noch einige js Probleme bekommen. Aktualisieren Sie Ihren Code, sehen Sie, was passiert, sagen Sie mir, was passiert und ich werde versuchen, Ihnen mehr zu helfen.

Answer 2

Entschuldigung, kann nicht kommentieren.(Die Antwort ist gleich mit der vorherigen von Fabio Luz, außer ein wenig extra über Ihren Tippfehler)

Sie haben einen Tippfehler in Ihrem Code? Ich sehe in Ihrem view Sie calVisible verbindlich sind, aber es ist calvisible in viewModel Wenn ja, tun Sie es wie diese

@bindable calVisible; // this was calvisible 

Danach können Sie einfach in Ihrem Viewmodel tun:

// Note that this will be called after the value changed 
calVisibleChanged(newValue) { 
    if (newValue) { 
     // Do something when cal is shown 
    } else { 

    } 
}