2017-06-21 9 views
0

Ich baue einen Prototyp SPA-Anwendung mit Ember.js und um schnell Dinge zu machen und arbeiten Ich habe (3) drei separate Javascript-Komponenten, dh ein Kalender/Todo-Liste, eine Javascript-Uhr, und ein weiteres Jquery-Plugin. Ich möchte, dass alle miteinander synchron sind.Mehrere Javascript-Komponenten in Ember.js

Mit anderen Worten, wenn jemand einen Todo oder einen Kalendereintrag eingibt, wird es das analoge Zifferblatt mit der Zeit einfärben und dann das andere Plugin mit Details aktualisieren.

Im Moment sind natürlich alle diese Komponenten NICHT geschrieben, um miteinander zu sprechen. Sie sind nur unabhängige Plugins, die von verschiedenen Open-Source-Entwicklern geschrieben wurden.

Ich habe zwei Fragen, wie man das macht.

1.) Es ist lächerlich, auf diese Weise zu gehen, und es wäre viel besser, einfach jede der Komponenten auseinander zu nehmen, zu sehen, wie sie funktionieren und sie dann von unten nach oben codieren, um auf einheitliche Weise zusammenzuarbeiten.

KOMMENTAR: Das oben genannte ist gut, aber HUGELY zeitaufwendig und vereitelt den Zweck, etwas zu erhalten, das schnell für Beweis des Konzeptes arbeitet. Ich werde im Grunde nur ein Rails-Backend mit Postgres schreiben und alle Steuerelemente mit Daten füllen und aktualisieren, wie Sie damit spielen.

2.) Wenn Sie die Komponenten so verwenden können, wie sie sind .... ist es ratsam oder machbar, diese als Ember-Komponente zu verpacken oder zu verpacken, dh sie in Komponenten zu verwandeln und dann Ember zu bekommen Daten hin und her.

Natürlich ist das Ziel hier, dass etwas funktioniert und VERSTANDEN wird, wie es zusammengefügt wird, und dann von diesem Wissen das Ganze von Grund auf in Ember/ES6 oder einem anderen Rahmen neu schreiben.

Danke Jungs!

Antwort

0

Sie können ein jQuery-Plug-in häufig ganz einfach in eine Ember-Komponente einfügen. Wenn Sie beim Rendern der Komponente eine Initialisierung durchführen müssen, können Sie dies im Hook 'didInsertElement' tun. Hier https://guides.emberjs.com/v2.14.0/components/the-component-lifecycle/#toc_integrating-with-third-party-libraries-with-code-didinsertelement-code

ist ein Beispiel Komponente aus meiner Anwendung: https://github.com/datafruits/datafruits/blob/master/app/components/datafruits-player.js#L102