Disclaimer: molto soddisfatto della direzione qui e grazie per tutto il lavoro svolto finora, poiché c’è molta potenza nel nuovo sistema. Dobbiamo solo assicurarci di mantenere alcune capacità equivalenti? …
Nel mio Component, TLP, sto attualmente impostando l’attributo style del tag esterno dell’Elemento Elenco Argomenti dinamicamente:
impostando il colore background: su un valore RGB univoco per abbinare il colore dominante dell’immagine. Questo dovrebbe idealmente essere fatto nel loop di Ember.
Sto anche impostando grid-row-end per determinare rapidamente la dimensione dell’elemento masonry. Questo è molto veloce ed efficiente e evita molto Javascript. Tuttavia, per questo uso Javascript poiché dipende dalle dimensioni finali nel DOM.
Queste sono entrambe personalizzazioni critiche del Componente Tema e senza di esse non sarebbe supportabile.
Questa prima modifica allo stile è attualmente ottenuta con un binding diretto dell’attributo style con modifyClass, che capisco essere un metodo deprecato.
Sarebbe possibile avere un’API nel nuovo mondo per questo, per favore?
O forse mi è sfuggito un modo esistente per farlo?
Tuttavia, questo non è qualcosa che credo possa essere ottenuto con le classi.
Quindi modifyClass è ancora valido? (Sintassi appena aggiornata - potrebbe essere utile se così fosse fare riferimento a quella guida)
Posso ancora usarlo per accedere all’attributo style del tag contenitore?
I componenti classici sono diversi in quanto storicamente fornivano l’accesso agli attributi a livello di tag contenitore al di fuori del template, quindi era semplice modificarli dinamicamente nel codice.
Ah, hai ragione. C’è un avviso di deprecazione nella console.
Avviso di deprecazione: la modifica di ‘component:topic-list-item’ con ‘modifyClass’ è deprecata. Utilizzare invece il trasformatore di valori ‘topic-list-columns’ e altre nuove API del plugin topic-list.
modifyClass di per sé non è deprecato. È un metodo di personalizzazione rischioso e dovresti prendere precauzioni quando lo usi (come descritto nella documentazione a cui @don ha fatto riferimento), ma non abbiamo piani imminenti per rimuoverlo.
Il motivo per cui stiamo stampando un messaggio di deprecazione per component:topic-list e component:topic-list-items è che questi componenti sono l’implementazione legacy dell’elenco degli argomenti e non vengono utilizzati quando l’elenco degli argomenti glimmer è abilitato. Ora, abbiamo una serie di componenti glimmer come components/topic-list/item.
Quindi, tecnicamente, potresti usare modifyClass su questi nuovi componenti. Ma, poiché sono componenti glimmer, non sarai in grado di modificare il tag di stile tramite la classe JS, quindi non aiuterà con il problema nell’OP.
Abbiamo una modalità “masonry” simile nel componente tematico ufficiale d-topic-thumbnails, quindi vale la pena esaminare come è implementata. Aggiungiamo una classe univoca a ogni “riga” dell’elenco degli argomenti:
Quindi renderizziamo un tag <style> dinamico in un plugin-outlet separato, che punta a quei nomi di classe:
Detto questo… è un po’ complicato, quindi forse dovremmo considerare l’aggiunta di un valueTransformer specifico per consentire la modifica dell’attributo style=. È un po’ complicato a causa delle protezioni xss/htmlSafe di Ember su quell’attributo… ma sono sicuro che potremmo far funzionare qualcosa.
Potremmo introdurre trasformatori specifici in determinati punti. Ma non prevediamo di aggiungere un’API generale che ti permetta di agganciarti a qualsiasi elemento/componente.
Per quanto riguarda la discussione sull’attributo style=, ho creato questa PR. Cercherò di farla revisionare/unire:
Grazie. Finora tutto bene con la tua tecnica attuale, l’ho adattata per TLP e sembra funzionare bene. Tornerò indietro se dovessi trovare altre potenziali lacune.
Fantastico! Sarò pronto per quando verrà fusa, non vedo l’ora! Grazie David!
Non è sufficiente aggiornare alla sintassi nativa delle classi?