-
Notifications
You must be signed in to change notification settings - Fork 29
/
mvc_lodash.html
123 lines (108 loc) · 3.34 KB
/
mvc_lodash.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MVC Pattern Example</title>
<style>
.photo-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.photo {
width: 300px;
border: 1px solid #ccc;
padding: 10px;
box-sizing: border-box;
position: relative;
}
.photo img {
width: 100%;
height: auto;
}
.caption {
font-size: 18px;
font-weight: bold;
margin: 10px 0;
}
</style>
</head>
<body>
<h1>MVC Pattern Example</h1>
<div id="photoGallery" class="photo-container"></div>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.20/lodash.min.js"></script>
<script type="text/template" id="photoTemplate">
<img src="<%= src %>" alt="<%= caption %>">
<div class="caption"><%= caption %></div>
</script>
<script>
// Model
class Photo {
constructor(caption, src) {
this.caption = caption;
this.src = src;
}
getCaption() {
return this.caption;
}
getSrc() {
return this.src;
}
}
// View
class PhotoView {
constructor(photoModel) {
this.photoModel = photoModel;
this.photoEl = document.createElement('div');
this.photoEl.classList.add('photo');
}
render() {
const template = document.getElementById('photoTemplate').innerHTML;
const compiled = _.template(template);
const html = compiled({
caption: this.photoModel.getCaption(),
src: this.photoModel.getSrc(),
});
this.photoEl.innerHTML = html;
}
getElement() {
return this.photoEl;
}
}
// Controller
class PhotoController {
constructor(photoModel, photoView) {
this.photoModel = photoModel;
this.photoView = photoView;
}
render() {
this.photoView.render();
return this.photoView.getElement();
}
}
// Application
const photoData = [
{
caption: 'Sample Photo 1',
src: 'https://via.placeholder.com/300x200?text=Sample+Photo+1',
},
{
caption: 'Sample Photo 2',
src: 'https://via.placeholder.com/300x200?text=Sample+Photo+2',
},
{
caption: 'Sample Photo 3',
src: 'https://via.placeholder.com/300x200?text=Sample+Photo+3',
},
];
const photoGallery = document.getElementById('photoGallery');
photoData.forEach((data) => {
const photoModel = new Photo(data.caption, data.src);
const photoView = new PhotoView(photoModel);
const photoController = new PhotoController(photoModel, photoView);
photoGallery.appendChild(photoController.render());
});
</script>
</body>
</html>