Polymer应用程序未将路线参数传递给组件。

Question

I am trying to access the url parameters in a polymer application using pagejs and I am unable to find out why the value remains unaccessible inside the components. 我正在尝试使用pagejs访问聚合物应用程序中的url参数，但无法找出为什么该值在组件内部仍然不可访问。

Here is what I had done on the routing.html file 这是我对routing.html文件所做的操作

page('/crews/edit/:crewId', function(data) {
        app.params = data.params;      
        app.route = 'crew-edit';
        setFocus(app.route);
    });

which I then tried to pass into the page component 然后我尝试传递给页面组件

<section data-route="crew-edit" tabindex="-1">
        <bw-crew-edit crewId="{{ app.params.crewId }}"></bw-crew-edit>
</section>

and then finally into the component itself 然后最后进入组件本身

<dom-module is="bw-crew-edit">
  <template>
      {{crewId}}    
  </template>
  <script>
    (function() {
        "use strict";

        Polymer({
            is: 'bw-crew-edit',
            properties: {              
              crewId: {
                type: String,
                notify: true,
                observers: '_crewIdChanged'
              }
            },
            _crewIdChanged: function() {
              console.log(this.crewId);
            },

        });

    })();
  </script>
</dom-module>

I am sure that I have followed the order of things and am unable to figure out why the component isn't receiving the data. 我确信我已经按照事情的顺序进行了操作，并且无法弄清组件为什么不接收数据。

Answer 1

As indicated in Polymer docs : 如Polymer docs中所示：

Property name to attribute name mapping 属性名称到属性名称的映射

... ...

When mapping attribute names to property names: 将属性名称映射到属性名称时：

Attribute names are converted to lowercase property names. 属性名称将转换为小写的属性名称。 For example, the attribute firstName maps to firstname . 例如，属性firstName映射到firstname 。

Attribute names with dashes are converted to camelCase property names by capitalizing the character following each dash, then removing the dashes. 通过在每个破折号后面使用大写字母，然后删除破折号，将带有破折号的属性名称转换为camelCase属性名称。 For example, the attribute first-name maps to firstName . 例如，属性first-name映射到firstName 。

In your case, you would use the crew-id attribute to set the crewId property of your element: 在您的情况下，您可以使用crew-id属性设置元素的crewId属性：

<bw-crew-edit crew-id="foo">

 <head> <base href="https://polygit.org/polymer+1.4.0/components/"> <script src="webcomponentsjs/webcomponents-lite.min.js"></script> <link rel="import" href="polymer/polymer.html"> </head> <body> <bw-crew-edit crew-id="foo"></bw-crew-edit> <dom-module id="bw-crew-edit"> <template> <span>crewId: {{crewId}}</span> </template> <script> HTMLImports.whenReady(function() { Polymer({ is: 'bw-crew-edit', properties : { crewId: String }, ready: function() { console.log('crewId', this.crewId); } }); }); </script> </dom-module> </body>

^codepen ^码笔

Polymer应用程序未将路线参数传递给组件。

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-06-02 13:52:58

Property name to attribute name mapping 属性名称到属性名称的映射

Polymer应用程序未将路线参数传递给组件。

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-06-02 13:52:58

Property name to attribute name mapping 属性名称到属性名称的映射

解决方案1
0 已采纳 2016-06-02 13:52:58