使用聚合物显示 HTML 中的数据

Question

我有以下文件：

店铺-categories.html

<link rel="import" href="../bower_components/polymer/polymer-element.html">

<dom-module id="shop-category-data">

  <script>
  (function() {

    let val = "Country";

    class ShopCategoryData extends Polymer.Element {

      static get is() { return 'shop-category-data'; }

      static get properties() { return {

        regionFilter: {
          type: String,
          value: val,
          notify: true
        }
        }
        }
    }

      customElements.define(ShopCategoryData.is, ShopCategoryData);

    })();

</script>

</dom-module>

这里是shop-app.html文件

<link rel="import" href="shop-category-data.html">
<dom-module id="shop-app">

  <template>

    <shop-category-data regionFilter="{{regionFilter}}"></shop-category-data>

    <h1>HELLO</h1>
    <h1>{{regionFilter}}</h1>
  </template>

  <script>

       class ShopApp extends Polymer.Element {

      static get is() { return 'shop-app'; }    

    }

    customElements.define(ShopApp.is, ShopApp);

  </script>

</dom-module>

我正在尝试将 region 的值从 shop-categories 传递到 shot-app。它正在显示 HELLO 但未显示 country。我认为这两行应该处理显示，但它们不是。

 <h1>HELLO</h1>
        <h1>{{regionFilter}}</h1>

Answer 1

当您使用 camelCase 属性名称（即 regionFilter）作为属性时，它必须转换为 dash- case 版本（即 region-filter）。

变化：

<shop-category-data regionFilter="{{regionFilter}}"></shop-category-data>

至：

<shop-category-data region-filter="{{regionFilter}}"></shop-category-data>

这是工作计划link：http://plnkr.co/edit/A5FxAf?p=preview

使用聚合物显示 HTML 中的数据

Displaying data in HTML using polymer

html

polymer