Good day! I can not understand how to properly implement the MVC pattern, here is a sample code:

class View { exampleMethod() { var btn = document.querySelector('.btn'); btnClose.addEventListener('click', function () { console.log(this.arr); }); } } class Model { constructor() { this.arr = ['1']; } } class Controller { constructor(view,model) { this.view = view this.model = model } } const myView = new View() const myModel = new Model() const myController = new Controller(myView,myModel)

I don’t understand how to properly link the view , so that when I clicked, the value is displayed in the module ? Hope available explained, thanks!

    2 answers 2

    I do not know how to implement this in javascript, but on c # it would look something like this:

     class Program { class View { public Controller Controller { get; set; } public void show() { Console.WriteLine(Controller.Model.Value); } } class Model { public string Value { get; set; } public Model() { Value = "1"; } } class Controller { public View View { get; set; } public Model Model { get; set; } public Controller(View view, Model model) { View = view; Model = model; View.Controller = this; } } static void Main(string[] args) { Controller myController = new Controller(new View(), new Model()); myController.View.show(); myController.Model.Value = "2"; myController.View.show(); Console.ReadLine(); } }

    The basic idea is:

    Model - contains the data structure.

    Controller - Can be played with filling in the data and calling the output of this data to the user interface.

    View - contains methods that display the data that was filled in the Model structure by the controller.

    Wherein:

    Model - knows nothing about how data will be displayed. It is possible that in these classes there is also an implementation for filling and processing data (not only in the controller)

    View - knows nothing about where it comes from and how data is processed. He knows only where and how to display this data.

    Controller - Knows nothing about data mapping. In principle, you may be completely unaware of how the data is filled and processed (if the logic is transferred to the Model). He knows only that the data is stored in the Model and displayed through the View.

    • if someone is confused by the View and Controller connection via View.Controller = this; I did this for example. This relationship can be implemented in different ways. For example, the global variable Controller or by passing data directly from the Model to the View methods as parameters. - Andrey Tumanov

    I do not understand how to correctly link the view, so that when I clicked, the value is displayed in the module?

    In this case, it is logical to link through the controller. Although it can be directly (for example, passing the model reference to the view designer). The second option is convenient when the view itself periodically displays data, without user intervention.

    The problem with your code is that view trying to get arr as its property, although this is a model property.

    If you develop your example, I would do so (communication through the controller, since the data is displayed by pressing a button):

     class View { log(data) { console.clear(); console.log(data.join(', ') || 'Нет данных'); } reportOk(el) { el.style.animation = 'green-bg 0.5s ease-in reverse'; setTimeout(() => { el.style.animation = null; }, 500); } }; class Model { constructor() { this.arr = []; } get data() { return this.arr; } set data(value) { this.arr = value.slice(); } sort() { this.arr.sort((a, b) => a - b); } }; class Controller { constructor(view, model) { this.view = view || new View(); this.model = model || new Model(); } eventHandler(e) { switch (e.target.getAttribute('mvc-do')) { case 'log': this.view.log(this.model.data); break; case 'add': let newData = [], len = e.target.getAttribute('mvc-len') || 5; for (let i = 0; i < +len; i++) newData[i] = Math.floor(Math.random() * 100); this.model.data = newData; newData.splice(0, newData.length); break; case 'sort': this.model.data.sort(); break; default: return; } this.view.reportOk(e.target); } connectElements(selector, event) { let els = document.querySelectorAll(selector); for (let el of els) el.addEventListener(event, e => this.eventHandler(e)); } }; const myView = new View(), myModel = new Model(), myController = new Controller(myView, myModel); //const myController = new Controller(); myController.connectElements('button', 'click'); 
     button { margin: 10px 5px; padding: 4px 12px; font: 18px sans-serif; } @keyframes green-bg { to { background-color: #7e7; } } 
     <button mvc-do="add" mvc-len="12">Новые данные</button> <button mvc-do="sort">Отсортировать</button> <button mvc-do="log">Вывести в консоль</button>

    This sample code does not claim to conform to any canons and / or patterns.