Полимер: вычисленные свойства и «неопределенный»

Мне нравится концепция вычисляемых привязок: Polymer автоматически пересчитывает вычисляемые свойства всякий раз, когда изменяется зависимое значение. Это обеспечивает отличное разделение свойств.

Например: предположим, мы хотим показать ребенка по сравнению с взрослым на основе свойства возраста. Если пользователь не указал возраст, мы просто называем это большим секретом.

Вот код:

properties: {
  age: Number,
  prettyAge: {
    type: String,
    computed: '_computePrettyAge(age)'
  }
},
_computePrettyAge: function(age) {
  if (!age) return 'Big secret';
  return age < 18 ? 'Child' : 'Adult';
}

Это прекрасно работает до тех пор, пока возраст инициализируется со значением, отличным от undefined. В противном случае вычисляемая привязка Polymer не активировала бы метод _computePrettyAge, сохраняя при этом свойство prettyAge undefined.

Так как же нам получить prettyAge, даже если свойство age undefined? Решение на самом деле довольно простое: определите значение для свойства prettyAgeсамого:

properties: {
  age: Number,
  prettyAge: {
    type: String,
    computed: '_computePrettyAge(age)',
    value: 'Big secret'
  }
},
_computePrettyAge: function(age) {
  if (!age) return 'Big secret';
  return age < 18 ? 'Child' : 'Adult';
}

Теперь prettyAge имеет значение Большой секрет, пока age не будет установлен в первый раз. После установки _computePrettyAge срабатывает и генерирует правильное значение.

Итак, что произойдет, если возраст снова станет неопределенным? В этом случае вычисляемая привязка Polymer будет активирована и вернет prettyAge значение Big secret.

Удачного кодирования!

Хотите узнать больше о Polymer? Посмотрите все наши Публикации на Medium о Polymer.