Не удается правильно загрузить JSON в DOM из-за этого ключевого слова - PullRequest
Новая
       13

Не удается правильно загрузить JSON в DOM из-за этого ключевого слова

0 голосов
/ 12 января 2020

Я пытаюсь загрузить JSON через javascript модульный шаблон. Я хочу, чтобы 3 человека в файле JSON загружались в DOM. Я полагаю, что после связывания этого с функцией loadingData она указывает на неправильный объект

Вот мой код 

(function() {

    var people = {
        people: [],

        init: function() {
                this.cacheDom();
                this.bindEvents();
                this.render();
        },

        cacheDom: function () {
            this.$el = document.querySelector('#peopleModule');
            this.$button = this.$el.querySelector('button');
            this.$input = this.$el.querySelector('input');
            this.$ul = this.$el.querySelector('ul');
            this.template = this.$el.querySelector('#people-template').innerHTML;
        },

        bindEvents: function() {
            document.addEventListener('DOMContentLoaded', this.loadingData.bind(this));

        },

        render: function() {
            var data = {
                people: this.people
            };
            this.$ul.innerHTML = Mustache.render(this.template, data);
        },

        loadingData: function() {
            var xhr = new XMLHttpRequest(),
                url = 'data/data.json',
                _self = this,
                result;
            xhr.onreadystatechange = function() {
                if(this.readyState == 4 && this.status == 200) {
                    result = JSON.parse(this.responseText);
                    _self.people = result.people;
                }
            };
            xhr.open('GET', url, true);
            xhr.send();

        }
    };

    people.init();

})();

Вот мой JSON

{
    "people": [
        {
            "name" : "Cameron"
        },
        {
            "name" : "Alex"
        },
        {
            "name" : "Sara"
        }
    ]   
}

А вот и мой HTML

<div id="peopleModule">
        <h1>People</h1>
        <div>
            <input type="text" placeholder="Name">
            <button id="addPerson">Add Person</button>          
        </div>
        <ul id="people">
            <script id="people-template" type="text/template">
                {{#people}}
                <li>
                    <span>{{name}}</span>
                    <del>X</del>
                </li>
                {{/people}}
            </script>
        </ul>
    </div>

1 Ответ

0 голосов
/ 13 января 2020

Я поставил render() функцию в неправильном месте

Это не имеет отношения к this ключевому слову 

(function() {

    var people = {
        people: [],

        init: function() {
                this.cacheDom();
                this.bindEvents();
        },

        cacheDom: function () {
            this.$el = document.querySelector('#peopleModule');
            this.$button = this.$el.querySelector('button');
            this.$input = this.$el.querySelector('input');
            this.$ul = this.$el.querySelector('ul');
            this.template = this.$el.querySelector('#people-template').innerHTML;
        },

        bindEvents: function() {
            document.addEventListener('DOMContentLoaded', this.loadingData.bind(this));

        },

        render: function() {
            var data = {
                people: this.people
            };
            this.$ul.innerHTML = Mustache.render(this.template, data);
        },

        loadingData: function() {
            var xhr = new XMLHttpRequest(),
                url = 'data/data.json',
                _self = this,
                result;
            xhr.onreadystatechange = function() {
                if(this.readyState == 4 && this.status == 200) {
                    result = JSON.parse(this.responseText);
                    _self.people = result.people;
                    _self.render();
                }
            };
            xhr.open('GET', url, true);
            xhr.send();

        }
    };

    people.init();

})();
...