learning-jsdp/ch08/mvvm.html at main · addyosmani/learning-jsdp · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MVVM Example</title>
    <style>
        .photo {
            list-style-type: none;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <ul id="photoList"></ul>

    <script>
        // Model
        const photos = [
            { caption: 'Sample Photo 1', src: 'photo1.jpg', metadata: 'Some metadata for photo 1' },
            { caption: 'Sample Photo 2', src: 'photo2.jpg', metadata: 'Some metadata for photo 2' },
        ];

        // ViewModel
        class PhotoViewModel {
            constructor(model) {
                this.caption = model.caption;
                this.src = model.src;
                this.metadata = model.metadata;
            }
        }

        // View
        class PhotoView {
            constructor(viewModel) {
                this.viewModel = viewModel;
                this.createPhotoElement();
            }

            createPhotoElement() {
                this.photoElement = document.createElement('li');
                this.photoElement.classList.add('photo');
                this.photoElement.innerHTML = `
                    <h2>${this.viewModel.caption}</h2>
                    <img class="source" src="${this.viewModel.src}" />
                    <div class="metadata">${this.viewModel.metadata}</div>
                `;
            }

            addToPhotoList(photoList) {
                photoList.appendChild(this.photoElement);
            }
        }

        // Binding ViewModel to View
        const photoList = document.getElementById('photoList');
        photos.forEach(photo => {
            const viewModel = new PhotoViewModel(photo);
            const view = new PhotoView(viewModel);
            view.addToPhotoList(photoList);
        });
    </script>
</body>
</html>