小编Ahr*_*Jon的帖子

使用Polymer根据输入值过滤表

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

data-binding html-table filter polymer

3
推荐指数
1
解决办法
2223
查看次数

嵌套的聚合物元素没有出现?

一个简单的嵌套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)

nested polymer

1
推荐指数
1
解决办法
2638
查看次数

标签 统计

polymer ×2

data-binding ×1

filter ×1

html-table ×1

nested ×1