Блог

Главная - Вопросы по программированию - Поиск полимера 3.0

Поиск полимера 3.0

#javascript #dom #components #polymer #web-component

Вопрос:

Я подошел к тому моменту, когда мне действительно нужна ваша помощь. Я постараюсь объяснить, что я делаю. Я прохожу стажировку, и мне нужен журнал звонков.

Мне нужно реализовать это с помощью полимера, пока все хорошо. Я добиваюсь отображения всех входящих данных.

Структура выглядит следующим образом:

  • У меня есть компонент журнала вызовов, где я все собираю.
  • Компонент ввода вызовов для записей.
  • А script.js файл, в котором я получаю данные в формате JSON и подготавливаю их для отправки обратно.

Теперь я хочу создать поле ввода поиска, которое будет фильтровать вызовы при каждом вводе

Это тот самый call-journal.js

 import { html, PolymerElement } from '@polymer/polymer/polymer-element'
import '@polymer/polymer/lib/elements/dom-if'
import '@polymer/polymer/lib/elements/dom-repeat'
import '@polymer/paper-input/paper-input.js'
import { ajaxRequest } from './ajaxRequest'

/**
 * @customElement
 * @polymer
 */
export class CallJournal extends PolymerElement {
    static get template() {
        return html`
            <style>
                
            </style>

            <div id="dataLoading" class="dataLoading">
                <span id="dataLoadingText">[[_computeText('Texts', 'dataLoading')]]</span>
            </div>

            <div id="headerWrapper" class="journalHeader">
                <span id="header_Anrufer" class="extCallerHeader">[[_computeText('Columns' ,'caller')]] </span>
                <span id="header_Zeit" class="duration">[[_computeText('Columns', 'duration')]]</span>
            </div>
      <div class="" id="searchBlock">
        <div id="searchCenter">
          <div id="searchLeft">
            <div id="searchRight">
              <input on-input="_searchCalls" 
              value="{{userInput::input}}"
              type="search" 
              id="inputField" 
              placeholder="[[_computeText('Searchbar', 'placeholder')]] ({{_countCalls(calls)}}                       [[_computeText('Searchbar', 'entries')]])">
            </div>
          </div>
        </div>
      </div>

      <button class="blueButton" on-click="_searchCalls"></button>
      <button class="redButton" on-click="_getCalls"></button>

            <template is="dom-repeat" items="{{calls}}" as="call" observe="call.length">
                <div id="row" class$="row {{_showCall()}}">
                    <call-entry data="[[call]]" language="[[language]]"></call-entry>
                </div>
            </template>
        `
    }
    static get properties() {
        return {
            calls: {
                type: Array,
                value() {
                    return []
                },
            },
            searchTimeout: {
                type: Object,
            },
            language: {
                type: String,
                value: 'de-DE',
            },
            loading: {
                type: Boolean,
                observer: '_showLoading',
            },
            userInput: {
                type: String,
                value: '',
            },
                }
            }

            _getSearchInput() {
                let userInput = this.shadowRoot.querySelector('#inputField').value
                return userInput
            }

            _searchCalls() {
                let userInput = this._getSearchInput()
                console.log(userInput)
            }

            _getCalls() {
                let calls = this.calls

                calls.forEach(element => {
                console.log(element)
                });
                console.log(calls)
            }

            _foo() {
                return this._getSearchInput();
            }

            _computeText(category, id) {
                return say(this.get('language'), category.concat('.', id))
            }

            _showLoading(newValue, OldValue) {
                newValue = this.loading
                if (newValue == false) {
                    this.shadowRoot.querySelector('#dataLoading').remove()
                }
            }

            _countCalls(call) {
                return call.length
            }

            constructor() {
                super()
            }

            ready() {
                super.ready()
            }
}

window.customElements.define('call-journal', CallJournal)

Любые идеи будут высоко оценены

Комментарии:

1. Полимер-это своего рода смерть… Все они переключились на новую игрушку Google: Lit . Смотрите lit.dev , поэтому мне интересно, сколько ответов вы получите здесь.

2. Я рассказал об этом своему руководителю, он сказал, что да, это правда, но мы делали другие проекты с полимером, он работает, так почему мы должны его изменить…

3. Тогда зачем они покупают новые ноутбуки или новые телефоны?

4. Прочитай о доме-повтор. Вы можете использовать атрибут «фильтр» или создать функцию, которую вы вызываете всякий раз, когда строка (например, ввод поиска) обновляется. is=dom-repeat" items="[[_filterOn(searchKeyword, calls]]"

Метки: