MVC Шаблоны JavaScript

Question

Я попытался выполнить задачу шаблонов, но это не работает. Мне нужно передать эту задачу, вот что я получил, и задача ниже. Буду признателен, если кто-нибудь может мне помочь.

window.onload = function() { 
 

 
//--------MODEL--------------- 
 
//* 
 
function Model(option) { 
 
\t this.name = option.name; 
 
\t this.age = option.age; 
 
\t this.year = option.year; 
 
\t this.examsTaken = option.examsTaken; 
 
}; 
 

 
Model.prototype = { 
 
\t constructor: Model, 
 
\t takeExam:function(){ 
 
\t \t this.examsTaken++; 
 
\t \t this.changed = true; 
 
\t } 
 
} 
 

 
// -----CONTROLLER ------------- 
 
//* 
 
function Controller(action){ 
 
\t this.model = action.model; 
 
\t this.elementId = action.elementId; 
 

 
}; 
 

 
Controller.prototype = { 
 
\t constructor: Controller, 
 
\t render: function(){ 
 
\t \t return '<span>' + this.model.name + '</span><button id="student-exams-button">Increase exams taken</button>'; 
 
\t }, 
 
\t clickHandlers: { 
 
\t \t '#student-exams-button': 'updateExams' 
 
\t }, 
 
\t updateExams: function(){ 
 
\t \t this.model.takeExam(); 
 
\t } 
 
}; 
 

 
//--------VIEW------------ 
 
function View() { 
 
\t document.getElementById(StudentController.elementId).innerHTML = StudentController.render(); 
 

 
} 
 
//---INFORMATION --- 
 

 
var Student = new Model({ 
 
\t name: 'Piotr', 
 
\t age: 22, 
 
\t year: 5, 
 
\t examsTaken: 2, 
 
}); 
 

 
var StudentController = new Controller({ 
 
\t model: Student, 
 
\t elementId: 'student-container' 
 
}); 
 

 
View(); 
 

 
//test 
 
console.log(StudentController.render()); 
 
Student.takeExam(); 
 
StudentController.updateExams() 
 
console.log(Student.examsTaken); 
 
StudentController.updateExams() 
 
console.log(Student.examsTaken); 
 

 

 
    }

и задача ...

Реализовать шаблон MVC/MVP по реализации Entities модели и контроллера/Presenter. Представление представлено в виде html. Модель хранит данные и методы обработки, а контроллер - обрабатывает события от пользователя и отображает представление. Таким образом, в результате следующий код должен работать, как ожидалось:

var Student = new Model({ 
 
    name: 'Piotr', 
 
    age: 22, 
 
    year: 5, 
 
    examsTaken: 2, 
 
    takeExam: function(){ 
 
     this.examsTaken++; 
 
     this.changed = true; 
 
    } 
 
}); 
 
var StudentController = new Controller({ 
 
    model: Student, 
 
    elementId: 'student-container', 
 
    render: function(){ 
 
     return '<span>' + this.model.name + '</span><button id="student-exams-button">Increase exams taken</button>'; 
 
    }, 
 
    clickHandlers: { 
 
     '#student-exams-button': 'updateExams' 
 
    }, 
 
    updateExams: function(){ 
 
     this.model.takeExam(); 
 
    } 
 
});

Таким образом, модель не имеет какой-либо особой логики, по сути простой объект. Контроллер также вставляет результат в найденный элемент рендеринга с идентификатором свойств elementId. Render вызывается, когда контроллер. Также необходимо осознать суть метода контроллера, который будет проверять каждые 100 мс this.model.changed, и если это правда, вызовите метод render, изменен и возвращен к false. (Это крайне отвратительная практика, но полезно для вас, чтобы понять, что произойдет дальше) значениями объекта являются методы clickHandlers Controller, который будет вызываться, когда пользователь нажимает на ключ элемента к текущему значению

Answer 1

я это сделал, так что, может быть, кто-то нужно будет ответить

function Model(obj) { 
     for (var key in obj) { 
       this[key] = obj[key]; 
     } 
} 

function Controller(obj) { 
     for (var key in obj) { 
       this[key] = obj[key]; 
     } 

     document.getElementById(this.elemetId).innerHTML = this.render(); 
     this.setHandlers(); 
     this.checkModelChanges(); 
} 

    Controller.prototype.setHandlers = function() { 
     var that = this; 

     document.getElementById(that.elemetId).onclick = function (e) { 
       var id = '#' + e.srcElement.getAttribute('id'), 
         handler = that.clickHandlers[id]; 
       if (handler) { 
         that[handler].call(that); 
       } 
     }; 
}; 

Controller.prototype.checkModelChanges = function() { 
     var that = this; 

     setInterval(function() { 
       if (that.model.changed) { 
         document.getElementById(that.elemetId).innerHTML = that.render(); 
         that.model.changed = false; 
       } 
     }, 100); 
};