Question

我有一个Polymer 1属性，它是一个Object，并使用属性上的JSON序列化来填充。

<x-example data='{"description":{"english":"desk","french":"bureau"}}'></x-example>

在模板中，我无法使用{{data.description[language]}}获取数据，尽管此前曾用于Polymer 0.5

是什么？

http://jsbin.com/zoquvuzeri/edit?html,output

Answer 1

在您的情况下，您必须根据language属性使用computed binding：

// template
<div>{{_computeDescription(language)}}</div>

// script
Polymer({
  is: 'x-foo',
  properties: {
    language: String,
    data: Object
  },
  _computeDescription: function(language) {
    return this.data.description[language];
  }
});

＆＃13;

<head>
  <base href="https://polygit.org/polymer+1.7.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
</head>
<body>
  <x-example data='{"description":{"english":"desk","french":"bureau"}}'></x-example>
  <x-example data='{"description":{"english":"desk","french":"bureau"}}' language="french"></x-example>

  <dom-module id="x-example">
    <template>
      <div>{{language}}: {{_computeDescription(language)}}</div>
    </template>
    <script>
      // only need this when both (1) in the main document and (2) on non-Chrome browsers
      HTMLImports.whenReady(function() {
        Polymer({
          is: "x-example",
          properties: {
            data : {
              type: Object,
              value: function() {return {}}
            },
            language: {
              type: String,
              value: 'english'
            }
          },
          _computeDescription: function(language) {
            return this.data.description[language];
          }
        });
      });
    </script>
  </dom-module>
</body>

＆＃13;

...或computed property：

// template
<div>{{description}}</div>

// script
Polymer({
  is: 'x-foo',
  properties: {
    language: String,
    data: Object,
    description: {
      computed: '_computeDescription(language)'
    }
  },
  _computeDescription: function(language) {
    return this.data.description[language];
  }
});

＆＃13;

<head>
  <base href="https://polygit.org/polymer+1.7.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
</head>
<body>
  <x-example data='{"description":{"english":"desk","french":"bureau"}}'></x-example>
  <x-example data='{"description":{"english":"desk","french":"bureau"}}' language="french"></x-example>

  <dom-module id="x-example">
    <template>
      <div>{{language}}: {{description}}</div>
    </template>
    <script>
      // only need this when both (1) in the main document and (2) on non-Chrome browsers
      HTMLImports.whenReady(function() {
        Polymer({
          is: "x-example",
          properties: {
            data : {
              type: Object,
              value: function() {return {}}
            },
            language: {
              type: String,
              value: 'english'
            },
            description: {
              computed: '_computeDescription(language)'
            }
          },
          _computeDescription: function(language) {
            return this.data.description[language];
          }
        });
      });
    </script>
  </dom-module>
</body>

＆＃13;

如何在Polymer 1中正确访问Object属性

1 个答案: