Recommendations for managing multiple instances of the same polymer element on a page?

Question

I have a general question. One of the main advantages of building a new polymer element is that it can be used as your own HTML element on the page. Thus, depending on the element you are creating, it is logical that you could add multiple instances of this element on the page.

Let's say I create a simple task list item that has several views. A simple view that simply lists the names of tasks in a list and a detailed view that lists tasks and many other properties of a task in a list.

Then I add the item to my page several times. Perhaps I want one instance of the item to display tasks related to Home, and another to list tasks related to work. But I want to send a link to someone from the list of Home tasks, open in a simple view, and a list of work tasks open in a detailed view. Or maybe I want the Home task list open in edit mode and the work task list open in view mode.

How would you create an element so that you can change attributes / settings for more than one of these elements on the page?

Answer 1

The beauty of a polymer is that you can change the appearance of a component by simply adding / changing its attributes.

( HOME/WORK) .

:

1:

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

2:

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

, (//). 2 task-list. 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>

detailed editable

detailed editable