создать полимерный пользовательский элемент, используя paper-listbox с фильтром

Я хотел бы создать пользовательские элементы в Polymer, используя бумажный список с фильтром (поиск). Начал с кода ниже. однако с этим кодом что-то не так. Нужна помощь в этом

<dom-module id="employee-list">
<template >
    <paper-input on-change="Filter"  floatingLabel id="searchEmployee"></paper-input>
    <paper-listbox class="dropdown-content">
        <template is="dom-repeat" items="[[getActiveEmployees]]" flex>
            <paper-item value="[[item.EmployeeCode]]" class="dropdown-item">[[item.EmployeeName]]</paper-item>
        </template>
    </paper-listbox>
</template>
<script>
    Polymer({
        is: 'employee-list',
        properties: {
            getActiveEmployees: {
                type: Array,
                value: [],
                notify: true
            },
            filterValue: {
                type: String,
                notify:true
            }
        },
        ready: function () {
            this.getActiveEmployees = GetActiveEmployeeList();
        },
        Filter: function(val) {
            alert(JSON.stringify(val));
            return function (person) {
                if (!this.filterValue) return true;
                if (!person) return false;
                return (person.CompanyName && ~person.CompanyName.toLowerCase().indexOf(val.toLowerCase()));
            };
        }
    });

</script>


custom-element polymer-1.0
person Sivaram Gollapudi    schedule 29.02.2016    source источник
comment
Односторонняя привязка не всегда работала для меня с dom-repeat, попробуйте {{...}} вместо [[...]], пока функция не заработает должным образом. Вы можете попробовать изменить его позже.   -  person Günter Zöchbauer    schedule 29.02.2016

Ответы (2)


arrow_upward
0
arrow_downward

Привяжите входное значение к filterValue и используйте Filter в dom-repeat

<paper-input value="{{filterValue}}"  floatingLabel id="searchEmployee"></paper-input>

<template is="dom-repeat" items="[[getActiveEmployees]]" flex filter="Filter">
person Günter Zöchbauer    schedule 29.02.2016
comment
Спасибо за исправление, все получилось правильно, и мы обновим код в ответе на вопрос. - person Sivaram Gollapudi; 01.03.2016

arrow_upward
0
arrow_downward

Вот обновленный код и он работает как положено.

<dom-module id="employee-list">
<template>
    <paper-input value="{{filterValue}}" label="Search Employee Code Or Name" floatingLabel id="searchEmployee"></paper-input>
    <paper-listbox >
        <template is="dom-repeat" items="[[getActiveEmployees]]" flex filter="{{Filter(filterValue)}}">
            <div class="row">
                <div class="col-sm-12" style="font-size:15px;font-family:'Open Sans'">
                    {{item.employeeNumber}} - {{item.employeeName}}
                </div>
                <hr />
            </div>
        </template>
    </paper-listbox>
</template>
<script>
Polymer({
    is: 'employee-list',
    properties: {
        getActiveEmployees: {
            type: Array,
            value: [],
            notify: true
        },
        filterValue: {
            type: String,
            notify:true
        },
        items: {
            type: Array,
            notify: true,
            value: function () { return []; }
        }
    },
    ready: function () {
        this.getActiveEmployees = GetActiveEmployeeList();
    },
    Filter: function (val) {
        return function (person) {
            if (!person) return false;
            if (val != null || val != undefined) {
                return (person.employeeNumber && ~person.employeeNumber.toLowerCase().indexOf(val.toLowerCase())) ||
                        (person.employeeName && ~person.employeeName.toLowerCase().indexOf(val.toLowerCase()));
            }
            else
                return true;
        };
    }
});
</script>

person Sivaram Gollapudi    schedule 01.03.2016