Elm

2016-04-23 18 views
5

akıllı ve aptal bileşenleri fikri Ben bir dilsiz bileşen kendi durumunu işlemez akıllı ve dilsiz bileşenlerin React's/Redux kavramını seviyorum (dökümü bileşeni dış dünya hakkında bir şey bilmiyor, hepsi bir olayı tetikler ve girişine göre değeri gösterir). Bu önemsizdir çünkü tüm durumlar tek bir yerde ele alınır (ana redüktör). Elm iseElm

, her bileşen (Redux' redüktör benzer) kendi 'güncelleme' işlevi vardır, bu nedenle aynı (dilsiz & akıllı bileşenler desen) kullanmak için önemsiz gibi görünmüyor.

Akıllı & döküm bileşenleri elm'de iyi bir uygulama kullanıyor mu? Eğer öyleyse, 'update' yöntemi olmayan bileşenlere sahip olacak mıyım? Bileşenime nasıl veri (sahne) veriyorum ve olayları ana bileşene nasıl tetikleyeceğim merak ediyorum.

Düşüncelerinizi duymayı çok isterim.

cevap

3

Yapabileceğiniz başka bir Akıllı/Aptal ayrımı, Effects döndüren bileşenler ile olmayanlar arasındadır. Ama soruyu cevaplamak için ...

Hiçbir şey bir model Veri olmadığından bir çocuğa

type Action 
    = Submit 
    | Click 

eylemleri tanımlayan ve

Child.view (Signal.forwardTo address ChildAction) props 

(Biz props geçmesi sahip Ana view durur

, ancak daha sonra tüm işlemlerin üstesinden gelmek üzere update:

case action of 
    ChildAction act -> 
    case act of 
     Child.Submit -> 
     ... 
     Child.Click -> 
     ... 

Bu Çocuk bir Eylem darbe Ana devlete veya ana şirketin başka çocuğu değiştirmek oldu zaten eğer gerekli olacaktır.

+0

Çocuğun Submit'i ele almasını ve ebeveynlerin Click işlemek için ne yapması gerekiyor? Çocuğun güncelleme fonksiyonu neye benziyor - özellikle de Click ile ne yapıyor? – Seth

+0

Yani, söylediğiniz şey, Çocuk'un bir tıklama ile hiçbir şey yapmamasıdır - yani 'Tıkla -> model '(aslında bu asla çalıştırılmasa bile). Tarayıcı onu serbest bırakmanıza izin vermez. –

+0

Seç mesajını (bir CSS sınıfı eklemek için) ele alan bir sekmeyi düşünün, ancak ebeveynin Tıklama mesajını işlemesine izin vermek istiyor. Haklısın, Elm, Click desen eşleşmesini atlamana izin vermeyecek. – Seth

4

bir "aptal bileşeni" (aka Presentational, Pure, Skinny bileşeni) Elm eşdeğer basitçe Html üreten bir fonksiyondur: elm-html kütüphane bu tarzda yazılır

view : ... -> Html 

, örneğin

button : List Attribute -> List Html -> Html 

İşlevi çağırdığınızda öznitelikleri sağlayarak "props" öğesini ayarlarsınız. Özellikle, List Attribute yılında tedarik işleyicileri tarafından olayları kaydetmek: Tam tipleri List Attribute ve List Html farklı olabilir rağmen

button 
    [ onClick addr ClickAction ] -- event handler 
    [ text "Click me" ]   -- child "components" 

Sen, diğer kütüphanelerde de bu modeli göreceksiniz.

İlgili konular