Polymer中有什么东西或多或少等同于AngularJS'过滤器'功能吗?我查看了模板绑定,但无法根据输入字段的值找到过滤表格的方法...
<input value="{{ID}}">
<table [==> some Polymer magic here involving {{ID}}]>
<tr>
<th>ID</th>
<th>VALUE</th>
</tr>
<tr>
<td>FOO</td>
<td>1</td>
</tr>
<tr>
<td>BOO</td>
<td>2</td>
</tr>
<tr>
<td>FAA</td>
<td>3</td>
</tr>
<tr>
<td>BAA</td>
<td>4</td>
</tr>
</table>
Run Code Online (Sandbox Code Playgroud)
然后在输入字段中键入"F"将使表格仅显示值等于1和3的行,并且继续显示"O"将仅显示"1"...
一个简单的嵌套polymer-element在另一个内部将不会显示:
的index.html
<!DOCTYPE html>
<html>
<head>
<script src="lib/polymer.min.js"></script>
<link rel="import" href="elements/indx-grid.html">
<link rel="import" href="elements/indx-griditem.html">
<title>INDX-polymer</title>
</head>
<body>
<indx-grid>
<indx-griditem></indx-griditem>
</indx-grid>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
INDX-grid.html
<polymer-element name="indx-grid">
<template>
<style>
@host {
:scope {
display: block;
margin: 20px;
border: 2px solid #E60000;
background: #CCC;
height: 500px;
}
}
</style>
</template>
<script>
Polymer('indx-grid');
</script>
</polymer-element>
Run Code Online (Sandbox Code Playgroud)
INDX-griditem.html
<polymer-element name="indx-griditem">
<template>
<style>
@host {
:scope {
display: block;
margin: 10px;
border: 1px solid #000;
border-radius: 3px;
background: #FFF;
width: 100px;
height: 100px;
}
} …Run Code Online (Sandbox Code Playgroud)