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

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

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

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

---

如何构建元素，以便在页面上更改这些元素的属性/设置？

polymer的妙处在于，您可以通过添加/更改属性来更改组件视图

根据您的需求（家庭/工作配置文件），创建自定义标记并提供特定属性，并相应地更改视图

例如：

步骤1：创建任务容器

具有必需属性的父组件

任务列表
聚合物（“任务清单”{
可编辑：false，
详细说明：错，
domReady:function（）{
var items=此$.tasks.items；
对于（变量i=0；i

就是这样，现在您可以通过为父组件指定所需的属性来控制任务视图

<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>

截图 具有

详细

和

可编辑

属性 详细的和可编辑的属性“>

无

详细

和

可编辑

属性

---

详细的和可编辑的属性“>

您好，感谢您的回复。你说的很有道理，我喜欢你设计解决方案的方式。但您的示例只在页面上显示了一个任务列表。我的具体问题是，如何管理为页面上相同聚合物成分的两个或多个实例的属性设置默认值？更具体地说，我如何向有两个或多个任务列表的网页发送链接。指定每个任务列表处于不同的状态/模式？例如，如果我的页面有：

列表2:

如何创建一个url，我可以发送给某人，以在编辑模式下打开主页任务列表，但在详细视图模式下打开工作任务列表？我是否在链接中添加一个url编码的JSON对象作为参数，指定显示每个列表的模式？谢谢查看polymer的flatiron director组件-您可以指定#散列类型url并共享它。您可以在此处查看演示实现-使用flatiron director-您可以根据可以与组件绑定的布线对象更改视图/设置。

<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>

<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>