Как объявить и привязать свойства с type=object в Polymer 1.0

У меня возникла проблема с пониманием того, как Polymer 1.0 обрабатывает объявленные свойства, особенно с типом = "object". Чтобы понять это, я пытаюсь создать простой элемент для выбора типа материала и отображения сведений о нем.

Вот как выглядит мой элемент до сих пор

    <dom-module id="mat-panel">
    <style>
      :host {
        background: blue;
      }

    </style>
  <template>
        <iron-selector attr-for-selected="name" selected="{{material}}">
      <div name="polyester">Polyester</div>
      <div name="nylon">Nylon</div>
      <div name="polypropylene">Polypropylene</div>
      <div name="kevlar">Kevlar</div>
    </iron-selector>
    <h1>{{material}}</h1>
      <ul>
        <li>{{material.color}}</li>
        <li>{{material.price}}</li>
      </ul>
  </template>
</dom-module>
  <script>
  (function() {
    Polymer({
      is: 'mat-panel',

      properties: {
        material: {
          type: Object,
          notify: true;
          value:{
            kevlar: {
              color: 'red'
              price: 1.25
            },
            nylon: {
              color: 'black'
              price: 2.50
            },
            polypropylene: {
              color: 'green'
              price: 3.15
            },
            polyester: {
              color: 'purple'
              price: 4.25
            }
          } 
        }
      }
    });
    })();
  </script>

Iron-selector должен позволять пользователю выбирать материал, а затем отображать название материала в h1, а цвет и цены — в li.

Итак, мне нужно знать две вещи:

  1. Правильно ли отформатирован мой материальный объект? Если нет, то как это должно выглядеть? (Я знаю, что это не из-за того, что ошибки консоли выдаются для «{» после «value:»)
  2. Правильно ли установлены мои привязки? Если нет, то как его настроить?

json polymer polymer-1.0
person Bonk    schedule 11.06.2015    source источник

Ответы (1)


arrow_upward
4
arrow_downward

У вас тут ряд проблем.

Первый,

        kevlar: {
          color: 'red'
          price: 1.25
        },

^ это неправильный синтаксис объекта, пары имя/значение должны быть разделены запятыми.

Во-вторых, ваш код ожидает, что свойство material будет состоять из трех вещей. material привязан к iron-selector.selected, что делает его названием выбранного материала. Однако вы также ожидаете, что material будет объектом данных (вещь со свойствами color и price). Наконец, вы определяете material как базу данных материальных объектов. Вы должны разделить список материалов, имя выбранного материала и объект выбранного материала.

Вот реализация:

<dom-module id="mat-panel">
  <style>
    :host {
      display: block;
      background: lightblue;
    }
  </style>

  <template>
    <iron-selector attr-for-selected="name" selected="{{name}}">
      <div name="polyester">Polyester</div>
      <div name="nylon">Nylon</div>
      <div name="polypropylene">Polypropylene</div>
      <div name="kevlar">Kevlar</div>
    </iron-selector>
    <h1>{{name}}</h1>
    <ul>
      <li>{{material.color}}</li>
      <li>{{material.price}}</li>
    </ul>
  </template>

  <script>
    Polymer({
      is: 'mat-panel',
      properties: {
        materials: {
          value: {
            kevlar: {
              color: 'red',
              price: 1.25
            },
            nylon: {
              color: 'black',
              price: 2.50
            },
            polypropylene: {
              color: 'green',
              price: 3.15
            },
            polyester: {
              color: 'purple',
              price: 4.25
            }
          }
        },
        material: {
          computed: '_computeMaterial(materials, name)'
        }
      },
      _computeMaterial: function(materials, name) {
        return materials[name];
      }
    });
  </script>
</dom-module>

Это случайно, но установленный вами цвет background не будет отображаться, потому что все элементы по умолчанию имеют значение display: inline, что, к сожалению, является тайной платформы. Включив display: block в свой стиль :host, вы также можете решить эту проблему.

person Scott Miles    schedule 11.06.2015
comment
Спасибо, сейчас попробую. Бит стиля остался от кусочка полимерного стартового набора, забыл его удалить. Изменить: попробовал, и это работает. Спасибо, что прояснили это для меня! - person Bonk; 11.06.2015