采用高分子

Question

显示在HTML数据我有以下文件：

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

这里是店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的价值从商店类别传递给shot-app。它正在显示HELLO，但country未显示。我认为这两行应该处理显示，但它们不是。

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

Answer 1

当使用驼峰属性名称（即regionFilter）作为属性，它必须被转换为破折号情况版本（即region-filter）。

变化：

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

到：

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

这里是工作plnkr链接：http://plnkr.co/edit/A5FxAf?p=preview