Visualizzazioni vs componenti in Ember.js


143

Sto imparando ember.js e sto cercando di capire la differenza tra una vista e un componente. Vedo entrambi come un modo per creare componenti riutilizzabili.

Dal sito Web di Ember sulle visualizzazioni:

Le visualizzazioni in Ember.js vengono in genere create solo per i seguenti motivi:
-Quando è necessaria una gestione sofisticata degli eventi utente
-Quando si desidera creare un componente riutilizzabile

Dal sito Web di Ember sui componenti:

Un componente è un tag HTML personalizzato il cui comportamento viene implementato utilizzando JavaScript e il cui aspetto viene descritto utilizzando i modelli di handle. Consentono di creare controlli riutilizzabili che possono semplificare i modelli dell'applicazione.

Qual è la differenza principale tra una vista e un componente? E quale sarebbe un esempio comune in cui preferirei utilizzare una vista su un componente e viceversa?

Risposte:


170

Ember.View

Un Ember.View è attualmente limitato ai tag creati per te dal W3C. Ma se volessi definire i tuoi tag HTML specifici dell'applicazione e quindi implementare il loro comportamento usando JavaScript? In realtà non puoi farlo con un Ember.View .

Ember.Component

Questo è esattamente ciò che i componenti ti consentono di fare. In realtà, è come una buona idea che il W3C sta attualmente lavorando sulla elementi personalizzati spec.

L'implementazione dei componenti di Ember cerca di essere il più vicino possibile alle specifiche dei componenti Web. Una volta che gli elementi personalizzati sono ampiamente disponibili nei browser, dovresti essere in grado di migrare facilmente i tuoi componenti Ember allo standard W3C e renderli utilizzabili anche da altri framework che hanno adottato il nuovo standard.

Questo è così importante per noi che stiamo lavorando a stretto contatto con gli enti normativi per garantire che la nostra implementazione dei componenti corrisponda alla tabella di marcia della piattaforma web.

È anche importante notare che un Ember.Component è in realtà un Ember.View (una sottoclasse) ma che è completamente isolato . L'accesso alla proprietà nei suoi modelli va all'oggetto vista e le azioni sono mirate anche all'oggetto vista . Non è possibile accedere alle informazioni circostanti contexto esterne a controller tutte le informazioni contestuali trasmesse , il che non è il caso di un Ember.View che ha effettivamente accesso al controller circostante, ad esempio all'interno di una vista si potrebbe fare qualcosa di simile this.get('controller')che ti darebbe il controller attualmente associato alla vista.

Qual è la differenza principale tra una vista e un componente?

Quindi, la differenza principale oltre a quella dei componenti consente di creare i propri tag e in un certo momento in futuro, quando saranno disponibili elementi personalizzati, migrare / utilizzare quei componenti in altri framework che supporteranno gli elementi personalizzati, è che a un certo punto un componente di brace renderà una visione un po 'obsoleta a seconda del caso specifico di implementazione.

E quale sarebbe un esempio comune in cui preferirei utilizzare una vista su un componente e viceversa?

Seguendo quanto sopra ciò dipende chiaramente dai casi d'uso. Ma come regola generale, se hai bisogno nella tua vista di accedere al controller circostante ecc. Usa un Ember.View , ma se vuoi isolare la vista e passare solo le informazioni di cui ha bisogno per renderlo indipendente dal contesto e molto più riutilizzabile, usa un componente Ember.Component .

Spero che sia d'aiuto.

Aggiornare

Con la pubblicazione di Road to Ember 2.0 , ora sei incoraggiato a utilizzare i componenti anziché le visualizzazioni nella maggior parte dei casi.


1
La mia unica preoccupazione per i componenti è quando diventano complessi. Non so ancora come separare la parte logica dalla parte di rendering. Ho viste regolari, hai questa separazione e potresti mettere la logica nel controller, ma con il componente, tendo a dire che finirai per avere un casino molto complesso e forse enorme. Sai se è possibile definire un controller simile per i componenti? O forse i componenti non intendono semplicemente gestire elementi grafici complessi.
sly7_7,

3
@ sly7_7, sì, ho capito. Ma penserei a un componente come a una scatola nera, comportandosi solo in base ai dati in cui viene passato. E sì, a seconda di ciò che fa questo potrebbe diventare un disastro molto rapidamente. Un controller dedicato avrebbe assolutamente senso, e un modo in cui potrebbe funzionare se i componenti diventassero iniettati in modo logico, ma per quanto ne so i componenti non fanno parte del contenitore di Ember dal design, immagino, ma potrebbe cambiare in futuro risolvere esattamente qualcosa del genere. Buon punto comunque!
intuitivepixel

2
alcuni attacchi possono uscire da un componente? IE, con la forma di blocco di un componente, gli elementi di contenuto nel blocco possono legarsi alle proprietà del componente, o devo usare una vista in questo caso?
Michael Johnston,

2
ah, sì, possono. {{view.xxxx}}funziona in un componente come in una vista.
Michael Johnston,


17

La risposta è semplice: usa i componenti

Secondo un video di formazione che è stato registrato nell'agosto 2013, Yehuda Kats e Tom Dale (membri del team Ember Core) hanno detto al pubblico di non utilizzare le visualizzazioni a meno che tu non sia uno sviluppatore di framework. Hanno apportato molti miglioramenti al manubrio e introdotto componenti, quindi le viste non sono più necessarie. Le viste sono usate internamente per alimentare cose come {{#if}} e {{outlet}}.

I componenti imitano anche da vicino lo standard Web Component che verrà integrato nel browser, quindi ci sono molti vantaggi secondari nel diventare comodi nella creazione di componenti Ember.

Aggiornamento 27/11/2014

Ora è ancora più importante utilizzare i componenti anziché le viste, poiché Ember 2.0 utilizzerà Componenti instradabili quando viene immessa una route, anziché un controller / vista. Per rendere la tua app a prova di futuro, è meglio stare alla larga da Views.

fonti:


5
"Se ritieni di dover usare una vista, usa invece un componente." è un consiglio terribile e tradisce una mancanza di comprensione dell'isolamento che i componenti implicano.
jmcd,

@jmcd, anche se quel commento è arrivato dagli stessi sviluppatori del framework, l'ho tolto.
Johnny Oshika,

2
Ho trovato la fonte: formazione video Gaslight, video 10.3 Domande e risposte @ 26m mark. Tom dice: '' Dato che quegli esempi sono stati scritti, ... abbiamo aggiunto componenti [che] non esistevano quando quegli esempi sono stati scritti. In generale direi che le viste non sono qualcosa che ci aspetteremmo che la maggior parte degli sviluppatori stia scrivendo, a questo punto sono più un oggetto interno per la contabilità '
jmcd

2
@jmcd, In quel video @ 26:15, Tom dice "fondamentalmente non usare Views". Inoltre, se salti a 30m nello stesso video, Yehuda Katz dice: "La vista è fondamentalmente un dettaglio dell'implementazione interna ... potresti usare una vista, ma poi sei uno sviluppatore di framework. Dovresti invece usare una delle cose che abbiamo creato per te che utilizza View e quello che è il più vicino a View ma ha una semantica migliore è Component. Qualunque cosa per cui avresti potuto usare una View prima, Component va bene. "
Johnny Oshika,

5

Allo v2.xstato attuale - essendo l'attuale versione stabile - le viste sono state completamente deprecate. Si dice che le viste vengano rimosse dall'API di Ember 2.0 .

Pertanto, l'utilizzo della {{view}}parola chiave in Ember 2.0 attiverà un'asserzione:

Asserzione non riuscita: l'utilizzo {{view}}o qualsiasi percorso basato su di esso è stato rimosso in Ember 2.0

Se devi usare le viste in Ember 2.0 puoi usare il componente aggiuntivo ember-legacy-views , che sarà compatibile con Ember fino alla versione 2.4 .

Quindi, per riassumere - i componenti sono il presente (le viste vengono rimosse) e il futuro - sostituiranno anche i controller. Vedi Componenti instradabili RFC .

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.