Polymer2.0 - Попытка изменить значение атрибута веб-компонента путем привязки значения из бумажного ввода

Я пытаюсь контролировать значение атрибута веб-компонента из полимерной бумаги.

Я могу изменить значения с двумя привязками бумажного ввода, но не могу контролировать значение атрибута

Я создал пример ниже и пытаюсь изменить атрибут resizable-Panel на вертикальный

 <resizable-panels [[text]]>

в

 <resizable-panels vertical>

используя бумажный ввод

Кодовый код для ссылки https://codepen.io/nagasai/pen/QMjjQw

HTML:

  <head>
  <base href="https://polygit.org/polymer+v2.0.0/shadycss+webcomponents+1.0.0/components/">
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="resizable-panels/resizable-panels.html">
  <link rel="import" href="paper-input/paper-input.html" 
</head>
<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
<style>
.panel { padding: 20px; color: white; font-family: sans-serif; width: 50%; }
      .p1 { background-color: #673AB7; }
      .p2 { background-color: #E91E63; }
      .p3 { background-color: #00BCD4; }
      .p4 { background-color: #FB8C00; }
      .p5 { background-color: #607D8B; }
      .p6 { background-color: #4CAF50; }
</style>
   <paper-input value="{{text::input}}"></paper-input>   
  <resizable-panels id="rp-2">
      <div class="panel p1">Lorem ipsum dolor…</div>
      <div class="panel p2">Second panel</div>
    </resizable-panels>
      <br>
         <resizable-panels [[text]]>
      <div class="panel p1">Lorem ipsum dolor…</div>
      <div class="panel p1">Second panel</div>
      <div class="panel p1">Third panel</div>
    </resizable-panels>
    </template>
  </dom-module>
</body>

JS:

  class XFoo extends Polymer.Element {
    static get is() { return 'x-foo'; }

    static get properties() {
      return {};

    }
       toggle() {
  this.$.collapse.toggle();
}

  }
  customElements.define(XFoo.is, XFoo);
Источник

1 ответ

Это не то, как он должен работать, вы не можете просто ударить подобный тег и ожидать, что это сработает - поскольку это не сборка на стороне сервера - вы не должны относиться к своим шаблонам таким образом.

Вот рабочая демонстрация: https://codepen.io/anon/pen/rzOgQX

Вы должны переключать логическое свойство vertical между истиной / ложью, чтобы архивировать то, что вы хотите. Надеюсь это поможет.

Источник
Другие вопросы по тегам