Question

我有一个跨元素共享的行为。
在元素中，我有一个on-change =＆＃34; _toggle＆＃34;开关。
在第二个元素中，我没有开关按钮，第一个元素的代码相同。当开关处于活动状态时，它会反射到包含开关的元件。

问：我怎样才能反映出变化=＆＃34; _toggle＆＃34;跨所有元素的功能？

我的代码：

1

<script>
  LanguageBehavior = {

    behaviors: [
      Polymer.AppLocalizeBehavior
    ],

    properties: {
      language: {
        value: 'sl',
        reflectToAttribute: true
      },
    },

    attached: function() {
      this.loadResources(this.resolveUrl('/data/locales.json'));
    },

    _toggle: function() {
      this.language = this.$.switch.checked ? 'en' : 'sl';
      // This function is the problem?
    }

  };
</script>

2

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/paper-toggle-button/paper-toggle-button.html">
<link rel="import" href="../../bower_components/app-localize-behavior/app-localize-behavior.html">
<link rel="import" href="behavior.html">

<dom-module id="bazdara-element-1">
  <template>
    <style>
      :host {
        display: block;
     }
   </style>
      {{localize('menu_2')}}  // THIS CHANGES WITH THE SWITCH
      <span title="english"> SI</span>
      <paper-toggle-button on-change="_toggle" id="switch"></paper-toggle-button>
      <span title="french">EN</span>
  </template>
  <script>
    Polymer({
      is: 'bazdara-element-1',
      behaviors: [Polymer.AppLocalizeBehavior, LanguageBehavior],
    });
  </script>
</dom-module>

3

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/app-localize-behavior/app-localize-behavior.html">
<link rel="import" href="behavior.html">

<dom-module id="bazdara-element-2">
  <template>
    <style>
      :host {
        display: block;
     }
   </style>
      {{localize('menu_2')}}  // THIS Doesnt change
  </template>
  <script>
    Polymer({
      is: 'bazdara-element-2',
      behaviors: [Polymer.AppLocalizeBehavior, LanguageBehavior],
    });
  </script>
</dom-module>

Answer 1

由于每个元素都有自己的行为副本，因此您的方法无法正常工作。现在我能想出的唯一选择是：

将您的元素保存在一个公共元素中并更改其中的属性。
如果您计划将所有元素放在一个单独的html文件中，则可以在该html文件中更改此功能，并将该属性绑定到您的所有元素。

聚合物反映元素的功能

1 个答案: