在页面中管理同一聚合物元素的多个实例的建议？

Question

我有一个普遍的问题。构建新聚合物元素的主要好处之一是它可以像页面中的本机HTML元素一样使用。因此，根据您构建的元素，您可以在页面中添加该元素的多个实例，这是合乎逻辑的。

假设我构建了一个具有多个视图的简单任务列表聚合物元素。 简单视图只列出列表中的任务名称和详细视图，列出任务和列表中任务的许多其他属性。

然后我多次将元素添加到我的页面。也许我想要一个元素实例列出与 Home 相关的任务，另一个实例列出与 Work 相关的任务。但我想发送一个链接给某人，其中简单视图中打开的 Home 任务列表和中打开的工作任务列表详细视图。或者我希望在编辑模式中打开主页任务列表，并在查看模式中打开工作任务列表。

如何构建元素，以便您可以将属性/设置更改为页面上的多个元素之一？

Answer 1

聚合物的优点在于您可以通过添加/更改属性来更改组件视图。

根据您的要求（HOME / WORK个人资料）创建自定义标签并提供特定属性，并相应地更改您的视图。

示例：

  

第1步：创建任务容器

<polymer-element name="task-list" noscript>
  <template>
    <h3>Tasklist</h3>
    <core-menu id="tasks">
        <content></content>
    </core-menu>
  </template>
</polymer-element>

  

Step2 ：创建任务组件

<polymer-element name="add-task" attributes="label detail">
  <template>
    <div id="task">
        <input type="checkbox" id="tick" on-click="{{lineThrough}}" /> {{label}}
        <div style="color:#999;margin: 5px 25px;">
            {{detail}}
        </div>
    </div>
  </template>
  <script>
    Polymer('add-task', {
      lineThrough: function() {
        this.$.task.style.textDecoration = this.$.tick.checked ? 'line-through': 'initial';
      }
    });
  </script>
</polymer-element>

现在使用上述组件，您可以创建基本任务列表：

<task-list>
  <add-task label="Learn Polymer" detail="http://www.polymer-project.org/"></add-task>
  <add-task label="Build something great" detail="create polymer element"></add-task>
</task-list>

截图

现在，要控制更改任务视图（列表/详细/可编辑）。只需向task-list组件添加2个属性即可。要从父add-task元素控制子视图task-list，您需要{@ 3}}您的子元素。

您的子组件应为：

<polymer-element name="add-task" attributes="label detail">
  <template>
    <div id="task">
        <template if="{{isEditable}}">
            <input value="{{label}}" />
        </template>
        <template if="{{!isEditable}}">
            <input type="checkbox" id="tick" on-click="{{lineThrough}}" /> {{label}}
        </template>
        <template if="{{isDetailed}}">
          <div style="color:#999;margin: 5px 25px;">
              {{detail}}
          </div>
        </template>
    </div>
  </template>
  <script>
    Polymer('add-task', {
      publish: {
        isDetailed: false,
        isEditable: false
      },
      lineThrough: function() {
        this.$.task.style.textDecoration = this.$.tick.checked ? 'line-through': 'initial';
      }
    });
  </script>
</polymer-element>

具有必需属性的父组件

<polymer-element name="task-list" attributes="editable detailed">
  <template>
    <h3>Tasklist</h3>
    <core-menu flex id="tasks">
        <content></content>
    </core-menu>
  </template>
  <script>
    Polymer('task-list', {
      editable: false,
      detailed: false,
      domReady: function() {
        var items = this.$.tasks.items;
        for(var i = 0; i < items.length; i++) {
            items[i].isDetailed = this.detailed;
            items[i].isEditable = this.editable;
        }
      }
    });
  </script>
</polymer-element>

即便如此，现在您可以通过为父组件指定必需属性来控制任务视图。

<task-list detailed editable>
  <add-task label="Learn Polymer" detail="http://www.polymer-project.org/"></add-task>
  <add-task label="Build something great" detail="create polymer element"></add-task>
</task-list>

截图

使用detailed和editable属性

没有detailed和editable属性