Javascript MVC с пользовательскими HTML элементами - уведомляющий контроллер

Question

Я написал пользовательские HTML элементы, чьи конструкторы и сами определения находятся в классах. Я сделал это для того, чтобы создать представление. Однако мне нужно создать приложение с шаблоном проектирования MVC, модель-представление-контроллер. Я видел несколько постов, но все они содержат стандартные элементы HTML. Как я могу сделать это с моими пользовательскими HTML элементами (кроме веб-компонентов; они не используют теневой DOM)

ps: я не использую Jquery, а скорее стандартные селекторы.

Answer 1

Вы можете использовать шаблон MVC для пользовательских элементов так же, как со стандартным Javascript.

Определить:

• one object (или class) для контроллера
• для модели
• для просмотра

Существует множество способов определить и связать модель, представление и контроллер.

---

Задание пользовательского элемента c

Адаптированный к пользовательскому элементу, вы можете:

• определяет класс пользовательского элемента (расширяющий HTMLElement) как Контроллер
• определяет класс пользовательского элемента как Представление
• определяют контроллер Model , View и внутри пользовательского элемента class
• определяют 3 объекта вне пользовательского элемента class
• et c.

---

Пример

В минималистском примере, реализованном ниже:

• Кастом Элемент class определяет Контроллер
• Модель объявляется в контроллере как function
• , тогда View объявляется в Контроллер как function тоже

Таким образом, View может напрямую обращаться к Модели (для чтения данных) и Контроллеру.

//CONTROLLER
class PersonController extends HTMLElement {
    connectedCallback() {             
        let controller = this 
        let elem = this

        //MODEL
        function PersonModel () {
            //Model API
            this.load = async id => {
                let res = await fetch( `https://reqres.in/api/users/${id}` )
                let json = await res.json()
                Object.assign( this, json.data )
                controller.updateView()
            }
        }                

        let model = new PersonModel

        //VIEW
        function PersonView () {
            elem.innerHTML = `
                Id : <input id=index type=number>
                <div id=card>Loading data
                </div>` 

            let card = elem.querySelector( 'div#card' )
            let index = elem.querySelector( 'input#index' )

            index.onchange = () => controller.init( index.value)               
            
            //View API
            this.update = () => {
                card.innerHTML = `
                    <div>Name : ${model.first_name} ${model.last_name}</div>
                    <div><img src=${model.avatar}></div>`
                index.value = model.id    
            }              
        }

        let view = new PersonView

        //Controller API
        this.init = id => model.load( id )               
        this.updateView = () => view.update() 

        //Init with some data 
        this.init( 4 )
    }
}

customElements.define( 'person-card', PersonController )

person-card { display: inline-block ; background-color: lightblue }
person-card input { width: 50 }

<person-card></person-card>

В этом примере создается элемент <person-card> с шаблоном MVC, который будет извлекать некоторые данные из веб-службы REST (на ). reqres.in ) и показать имя, идентификатор и аватар человека.