Bileşen tabanlı web framework'ü kullanan bir web uygulaması nasıl organize edeceğimi bilmiyorum

Question

Ön uç uygulamalar için bileşen tabanlı çerçeveler öğrenmeye çalışıyorum. Şu anda, RiotJS kullanıyorum ama aynı kavramları (Tepki, Açısal 2.0 vb) kullanan herhangi bir çerçeve için geçerlidir.

Temel bir MVC ön uç çerçevelerinde (ör. AngularJS), denetleyiciler ve yönlendirici birbirine çok bağlıydı. Ancak bileşen tabanlı bir çerçeve ile, yönlendirici ve denetleyiciler arasındaki çizgi çok daha geniş. Ve bu beni en çok şaşırtan şey.

İşte kurmaya çalışıyorum bir uygulamanın bir örneğidir:

üç ana UI öğeleri vardır: Navigasyon Bar, İçerik Alanı ve Oturum açma Formu. Böylece üç bileşen oluşturdum: my-navbar, my-content, my-signin. Bileşen başına birden fazla rota oluşturabiliyordum. Örneğin, bir rota değişikliği varsa, navbar aktif "modülü" günceller. Bunu yapmak kolaydı çünkü tek yaptığım şey bir liste öğesinin sınıfını değiştirmek.

Şimdi, diğer etiketleri <my-content></my-content> içine yüklemek istiyorum. AngularJS'de, görünümü tamamen değiştirdim (ui yönlendirici kullanarak). Bunu bileşen tabanlı bir çerçevede nasıl başarabilirim. Benim içerik-kullanıcı-liste-görünüm, benim-içerik-kullanıcı-detay-görüş olarak adlandırılan 2 daha fazla bileşen var diyelim. Onları rotaya göre my-content bileşenine nasıl ekleyebilirim? document.innerHTML += '<my-content-users-list-view></my-content-users-list-view> gibi ekledim mi?

Sözdizimimin çoğunun RiotJS olduğunu biliyorum, ancak bunu başka bir çerçevenin sözdizimine yazarsanız anlayacağım.

Teşekkür ederiz!

Answer 1

Esasen, evet, sadece bir DOM düğümü olarak etiketinizi eklemek olabilir ve daha sonra monte etmek Riot çağırır:

riot.route('/awesome-route',() => { 
    const tag = 'your-awesome-tag'; 
    const options = { ... }; 
    const elem = document.createElement(tag); 
    // TODO empty your content container using pure DOM or jQuery to get rid of the previous route's view... 
    document.querySelector('#content').appendChild(elem); 
    riot.mount(elem, tag, options); 
});