-2
我试图完成模式的任务,但它不起作用。我需要通过这个任务,这里是我得到的,任务如下。如果有人能帮助我,我将不胜感激。MVC JavaScript模式
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。视图以html的形式呈现。 模型保留数据和处理方法,Controller - 处理来自用户的事件并呈现视图。 因此,如下面的代码的结果,应该按预期工作:
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();
}
});
因此,模型不具有任何特殊的逻辑本质上是一个单纯的对象。控制器还会将结果插入呈现器 功能找到的元素,其id为属性elementId。渲染器在Controller中被调用。还有必要实现Controller的方法的实质,它将每隔100ms检查一次this.model.changed,如果为true,则调用render方法, 已更改并返回false。 (这是一个非常可恶的做法,但对你理解下一步会发生什么很有用)对象的值 是方法clickHandlers控制器,当用户点击元素键到当前值时将调用该控制器
这看起来像你的家庭作业的一个很好的书面记录,但_“这不作品” _不是你的问题的一个很好的书面记录......在哪里具体是你卡住了吗?我们不会在StackOverlflow上为您做功课,但是我们会帮助您回答一个特定的问题,让您坚持做自己的功课。 –
这看起来像你的整个任务,我们不会为你解决这个问题。毕竟,它存在以至于你应该学习。如果您遇到MVC问题,请阅读它。如果您遇到特定问题,请发布该问题。 – Jan