Блог

Главная - Вопросы по программированию - Как правильно получить доступ к свойству объекта в Polymer 1

Как правильно получить доступ к свойству объекта в Polymer 1

#polymer

#полимер

Вопрос:

У меня есть свойство Polymer 1, которое является объектом и заполняется с помощью сериализации JSON для атрибута.

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

В шаблоне я не могу получить доступ к данным, используя, {{data.description[language]}} хотя это ранее работало в Polymer 0.5

Что дает??

http://jsbin.com/zoquvuzeri/edit?html , выходной

Комментарии:

1. вы не можете использовать square brackets для сопоставления объектов bindings , разрешены только точки

Ответ №1:

В вашем случае вам придется использовать вычисляемую привязку на основе language свойства:

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

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

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

…или вычисляемое свойство:

 // 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];
  }
});
  

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

Комментарии:

1. Ты снова меня опередил. Здесь, пожалуйста, примите голос за 🙂

2. @TomaszPluskiewicz Хаха очень признателен 😉