Почему для вычисляемых свойств Polymer нужны явные аргументы свойств?

Я немного покопался в элементах Polymer 1.0, и мне немного интересно узнать о вычисленных свойствах.

Например, в paper-box-panel.html,

<dom-module id="paper-drawer-panel" …>
  …
  <div id="main" style$="[[_computeDrawerStyle(drawerWidth)]]">
    …
  </div>
  …
</dom-module>
<script>
Polymer({
  is: 'paper-drawer-panel',
  …
  _computeDrawerStyle: function(drawerWidth) {
    return 'width:' + drawerWidth + ';';
  },
  …
</script>

drawerWidth является собственностью paper-drawer-panelТак почему же так важно явно включить его в параметры вычисляемого свойства?

Является

[[_computeDrawerStyle()]]

…

_computeDrawerStyle: function () {
  return 'width:' + this.drawerWidth + ';';
}

Это плохая практика?

3 ответа

Решение

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

принимать [[_computeDrawerStyle()]], например. В этом случае Polymer не знает, от каких других свойств зависит вычисляемое связывание, и вычисляет его только один раз при загрузке.

Как только вы добавите drawerWidth явно ([[_computeDrawerStyle(drawerWidth)]]Теперь Polymer знает, что он должен снова запускать вычисленную привязку для нового значения drawerWidth изменения.

Я думаю, что вы в замешательстве. То, на что вы ссылаетесь в своем примере кода здесь style$="[[_computeDrawerStyle(drawerWidth)]]" это вызов частной функции с именем _computeDrawerStyle, и, конечно, вам нужно явно указать ей правильные параметры. Проверьте документацию здесь, чтобы узнать о вычисляемых свойствах.

Полимер имеет две разные концепции, и вы их путаете.

  1. Вычисляемые свойства. Это свойства, которые зависят от других и пересчитываются при изменении их компонентов. Затем вы можете привязать значение этого вычисленного свойства в качестве значения свойства. <paper-draw-panel> НЕ имеет вычисляемого свойства (я проверил код).

  2. Вызовы функций, на которые есть ссылки в привязке данных (вот что _computeDrawStyle) является. Это заставляет Polymer вызывать эту функцию (элемента) при изменении любого из его параметров. Все параметры являются свойствами (или вы можете использовать свойства объекта и индексы массивов). Это то, что происходит здесь.

Другие вопросы по тегам