Question

我正在尝试使用pagejs访问聚合物应用程序中的url参数，但我无法找出为什么值在组件内部无法访问。

以下是我在routing.html文件中所做的工作

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

然后我尝试将其传递到页面组件

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

然后最终进入组件本身

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

我确信我已遵循了事情的顺序，并且无法弄清楚组件为什么没有接收数据。

Answer 1

如Polymer docs中所示：

属性名称映射的属性名称

...

将属性名称映射到属性名称时：



属性名称将转换为小写属性名称。例如，属性firstName映射到firstname。



带有破折号的属性名称通过将每个破折号后面的字符大写，然后删除破折号来转换为camelCase属性名称。例如，属性first-name映射到firstName。

在您的情况下，您可以使用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 app不将路由参数传递给组件。

1 个答案:

属性名称映射的属性名称