使用带过滤器的纸列表框创建聚合物自定义元素
create polymer custom element using paper-listbox with filter
我想使用带过滤器(搜索)的纸列表框在 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>
将输入值绑定到filterValue
并在dom-repeat
中使用Filter
<paper-input value="{{filterValue}}" floatingLabel id="searchEmployee"></paper-input>
<template is="dom-repeat" items="[[getActiveEmployees]]" flex filter="Filter">
这是更新后的代码,它按预期工作。
<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>
我想使用带过滤器(搜索)的纸列表框在 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>
将输入值绑定到filterValue
并在dom-repeat
Filter
<paper-input value="{{filterValue}}" floatingLabel id="searchEmployee"></paper-input>
<template is="dom-repeat" items="[[getActiveEmployees]]" flex filter="Filter">
这是更新后的代码,它按预期工作。
<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>