Question

我用车把做了一个模板，所以现在我的问题很简单：

当用户在输入字段中输入一个字母或单词或其他内容时，该函数会启动ajax调用并返回结果。

但是，我认为，我把这个问题颠倒了。

因此，如果您想帮助我，可以查看代码：

import Handlebars from 'handlebars'

export default class Templating {

    constructor() {
        this._grabDom();
        this._addListener();

        this._getData();
        this._putData();
    }


    /* PRIVATE METHODS */

    _createBounds() {
        ['_getData', '_putData', '_prevent']
            .forEach((fn) => this[fn] = this[fn].bind(this));
    }

    _putData() {
        for (let i = 0; i < this._parsing.search.length; i++) {
            let compiledTemplate = Handlebars.compile(this._dom.cardsTemplate);

            let generated = compiledTemplate(this._parsing.search[i]);
            this._dom.cardsContainer.innerHTML += generated
        }
    }

    _getData() {
        let req = new XMLHttpRequest();
        req.open('GET', 'http://joibor.fr/api/search.json', false);
        req.send(null);
        if (req.status === 200) {
            this._parsing = JSON.parse(req.responseText);
        }
    }

    _prevent(pEvt) {
        if (pEvt.keyCode === 13) {
            pEvt.preventDefault();
            this._value = pEvt.target.value;
        }
    }

    /* END PRIVATE METHODS */

    /* PUBLIC METHODS */

    /* END PUBLIC METHODS */

    /* EVENT HANDLER */

    _addListener() {
        this._dom.searchInput.addEventListener('keydown', this._prevent)
    }

    /* END EVENT HANDLER */

    /* GRAB DOM */

    _grabDom() {
        this._dom = {};
        this._dom.cardsTemplate = document.querySelector('#cards-template').innerHTML;
        this._dom.cardsContainer = document.querySelector('.section-bottom__template');
        this._dom.searchInput = document.querySelector('.js-search-input');
    }

    /* END GRAB DOM*/
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Search</title>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="section-top">
    <form class="form">
        <label class="form__label" for="">Lieux</label>
        <input type="text" class="form__input js-search-input" placeholder="...">
    </form>
</div>
<section class="section-bottom">
    <h2 class="section-bottom__title">Les membres qui se trouvent à Reims</h2>
    <div class="section-bottom__template"></div>
    <script id="cards-template" type="text/x-handlebars-template">
        <div class="cards">
            <div class="cards__position">
                <img class="cards__image" src="{{image}}" alt="profil 1">
                <div class="cards-content">
                    <div class="about about--flex">
                        <p class="about__name">{{name}}</p>
                        <p class="about__city">{{city}}</p>
                    </div>
                    <div class="text">
                        <p class="text__content"><span class="text__content__cat">Disponible : </span> {{start}} <span class="text__content__cat">au</span> {{end}}</p>
                    </div>
                    <div class="place">
                        <p class="place__content"><span class="place__content__cat">Nombre max de voyageurs : </span> {{max}}</p>
                    </div>
                </div>
            </div>
        </div>
    </script>
</section>
<script src="js/script.js"></script>
</body>
</html>

实际上，模板工作但不是搜索我无法解决这个问题。

当我渲染我的模板时，我想显示一个eventHandler函数

0 个答案: