0

我正在尝试从聚合物纸输入中控制 webcomponent 的属性值。

我可以通过两个纸张输入绑定来更改值，但无法控制属性值

我创建了下面的示例并尝试将 resizable-panels 属性更改为垂直

 <resizable-panels [[text]]>

至

 <resizable-panels vertical>

使用纸张输入

Codepen 代码供参考 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…&lt;/div>
      <div class="panel p2">Second panel</div>
    </resizable-panels>
      <br>
         <resizable-panels [[text]]>
      <div class="panel p1">Lorem ipsum dolor…&lt;/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);
4

1 回答 1

0

这不是它应该如何工作的，你不能只是打一个标签并期望它能够工作 - 因为这不是服务器端构建 - 你不应该这样对待你的模板。

这是一个工作演示：https ://codepen.io/anon/pen/rzOgQX

您应该vertical在 true/false 之间切换布尔属性以归档您想要的内容。希望这可以帮助。

于 2017-07-28T21:14:39.740 回答