Question

我想使用带有过滤器（search）的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>

Answer 1

将输入值绑定到filterValue并使用Filter

中的dom-repeat

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

<template is="dom-repeat" items="[[getActiveEmployees]]" flex filter="Filter">

Answer 2

以下是更新的代码及其按预期工作。

<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>

使用带过滤器的paper-listbox创建聚合物自定义元素

2 个答案: