Question

我正在制作一个使用包含三页的铁页元素的Polymer应用程序。前两页每个都包含一个纸质无线电组，每个纸张无线电按钮都有一个名称值和一个价格值。第三页应该显示一个列表，其中包含我在第一页和第二页中选择的选项的名称和价格。

以下是第一页内元素的代码：

<dom-module id="model-app">
<template>

    <paper-radio-group class="layout vertical" id="modelgrp" selected="{{selected}}">
    <template is="dom-repeat" items="{{models}}">
    <paper-radio-button name="{{item.model}}"><span>{{item.model}}</span> <div class="paper-font-caption"><span>{{item.price}}</span> SEK</div></paper-radio-button>
    </template>
    </paper-radio-group>
    <paper-item><span>{{selected}}</span></paper-item>

</template>
<script>
Polymer({
  is: 'model-app',
  ready: function() {
    this.models = [
        {model: 'Model1', price: '16 860'},
        {model: 'Model2', price: '17 391'},
    ];
  }
});
</script>

</dom-module>

第二页的元素与不同的选项基本相同。

我已经发现我可以在包含{{selected}}的纸质项目中看到所显示的所选项目的名称。

但是我无法弄清楚如何在另一个元素中获得特定的{{selected}}值。我尝试了{{modelgrp.selected}}和{{modelgrp。$。selected}}之类的内容，但它没有显示任何内容。

此外，{{selected}}值仅适用于名称。如何获取所选项目的item.price值？

以下是第三页无法正常运行的代码：

<dom-module id="summary-app">
<template>
    <paper-item>{{modelgrp.$.selected}}</paper-item>
    <paper-item>test</paper-item>
</template>
<script>
Polymer({
  is: 'summary-app',
  ready: function() {

  }
});
</script>

</dom-module>

Answer 1

我在整个工作中学到的是模板id引用（来自组件引用的$）在绑定中不起作用。这是因为绑定参考值的方式。 JustinXL很接近。您不应该公开项目，而是公开所选变量，以便在页面之间启用双向绑定。在model-app的“selected”属性上设置“notify：true”非常重要，这样它就可以将值传递给#app模板。然后，为currentSelected设置#app模板的值将传播到其中使用它的值的任何元素。例如summary-app的selected属性。希望这能解释它。

<dom-module id="model-app">
<template>

    <paper-radio-group class="layout vertical" selected="{{selected}}">
    <template is="dom-repeat" items="{{models}}">
    <paper-radio-button name="{{item.model}}"><span>{{item.model}}</span> <div class="paper-font-caption"><span>{{item.price}}</span> SEK</div></paper-radio-button>
    </template>
    </paper-radio-group>
    <paper-item><span>{{selected}}</span></paper-item>

</template>
<script>
Polymer({
  is: 'model-app',
  properties: {
        selected: {
              type: Number,
              notify: true,
              reflectPropertyToAttribute: true
        }
  },
  ready: function() {
    this.models = [
        {model: 'Model1', price: '16 860'},
        {model: 'Model2', price: '17 391'},
    ];
  }
});
</script>

</dom-module>

reflectPropertyToAttribute不是必需的，但有助于在所选项目发生更改时查看对属性的更改。其他组件

<dom-module id="summary-app">
<template>
    <paper-item>[[selected]]</paper-item>
    <paper-item>test</paper-item>
</template>
<script>
Polymer({
  is: 'summary-app',
  property: {
        selected: Number
  },
  ready: function() {

  }
});
</script>

</dom-module>

然后正确使用它们：

<template is="dom-bind" id="app">
    <item-pages>
        <!-- First page -->
        <model-app selected="{{currentSelected}}"></model-app>
        <!-- Second page -->
        <summary-app selected="[[currentSelected]]"></summary-app>
    </item-pages>
</template>

从另一个元素

1 个答案: