Вопрос о Polymer 1.0, использующем iron-ajax для создания сервера данных - PullRequest
Новая
       26

Вопрос о Polymer 1.0, использующем iron-ajax для создания сервера данных

0 голосов
/ 31 августа 2018

У меня есть проект, использующий Polymer 1.2, и я пытаюсь создать компонент сервера данных с использованием iron-ajax с именем review_data_service.html , который может сделать вызов AJAX для отправки (GET, POST, PUT или DELETE ) запрос к бэкенду так: 

<dom-module id="review-data-service">
        <template>
                <iron-ajax url= "[[URI]]"
                id="GET_REVIEWS"
                handle-as="json" 
                loading="{{loading}}" 
                on-response="handleResponse"
                content-type="application/json"
                auto></iron-ajax>
        </template>
        <script>
            Polymer({
                is: 'review-data-service',
                properties: {
                    reviewId : Number,
                    API: {
                        type: Object,
                        value:  () => {
                            return {
                                BASE : 'http://localhost:3000',
                                RESOURCE : 'reviews'
                            };
                        }
                    },
                    URI : {
                        type : String,
                        computed : 'setURI(API.BASE, API.RESOURCE)'
                    }
                },
                setURI : (BASE, RESOURCE) => {
                    return `${BASE}/${RESOURCE}`;
                },
                handleResponse : function (event) {
                    let promise = new Promise ((resolve, reject) => {
                        if (event.detail.response != null) {
                            resolve(event.detail.response);
                        } else {
                            reject('error');
                        }
                    });
                    promise.then(result => {
                        this.fire('getReviews', 
                            {reviews : result}
                        )
                    }, result => {
                        console.log('reject', result);
                    })
                }
            });
        </script>
    </dom-module>

В моем другом компоненте, my-project-reviewer.html , я могу успешно получить данные обзора, например: 

 listeners: {
                    'getReviews': '_getReviews',
            },

_getReviews: (event) => {
                this.reviews = event.detail.reviews;
                // can get the data successfully at here:
                console.log(this.reviews);
            },

Однако, когда я пытаюсь показать эти данные в DOM, это не сработает: 

<!-- cannot see anything here:  -->
                <template is="dom-repeat" items="[[reviews]]">
                        <div class="project-name">[[item.name]]</div>
                </template>

Кто-нибудь знает, что происходит? Вначале я не использовал Promise, я думал, что это может быть из-за проблем с асимметричным кодом (когда dom отображается, по-прежнему не удается получить данные для отображения), поэтому я использовал Promise, но все равно получил тот же результат (только данные могут получить в консоль) Плюс, есть лучший способ (или пример) для создания службы данных в полимере 1? (Раньше я использовал Angular, который может отлично это осуществить). Просто хотите создать такой компонент, который будет поддерживать базовые http-запросы (GET, POST, PUT, DELETE) для использования в другом компоненте? или сделать службу данных как поведение (я пытался, но не очень хорошо работает) большое спасибо в продвинутом!

1 Ответ

0 голосов
/ 31 августа 2018

Полимер должен знать, что есть что-то, чтобы попытаться позвонить 

_getReviews: (event) => {
            this.set('reviews', event.detail.reviews);
            // can get the data successfully at here:
            console.log(this.reviews);
        }
...