Привязка словаря атрибутов по определению элемента - PullRequest
Новая
       17

Привязка словаря атрибутов по определению элемента

0 голосов
/ 03 апреля 2020

Я пытаюсь связать словарь атрибутов типа {'id': 'myid', 'class': 'my-1 pr-md-2', ...} в то время, когда я определяю элемент. Я не хочу устанавливать эти атрибуты после загрузки DOM Javascript.

Я борюсь с правильной формой выполнения этого. Я не могу связать их один за другим, объявляя имя и значение атрибута вручную, поскольку они являются заданными пользователем параметрами. Я думаю добавить их в свойство attributes, но я не знаю, целесообразно ли делать это таким образом.

Это моя структура данных: 

<template is="dom-repeat" items="{{links}}" as="link">
    <a class="nav-item nav-link mr-md-2" on-tap="changePage">{{link.title}}</a>
</template>

и атрибуты сохраняются в каждом link.attributes свойстве. Мое решение будет примерно таким:

HTML

<template is="dom-repeat" items="{{links}}" as="link">
    <a attributes={{appendAttributes(link)}} class="nav-item nav-link mr-md-2" on-tap="changePage">{{link.title}}</a>
</template>

JS

appendAttributes: function(link){
    //Get current attributes of the element and append the ones in link.attributes
}

Это правильный способ справиться с этим?

1 Ответ

1 голос
/ 05 апреля 2020

Насколько я знаю, это невозможно с системой шаблонов Polymer: нет способа получить доступ к элементу, к которому применяется вычисленная привязка.

This 

<a attributes={{appendAttributes(link)}}></a>

не может работать, потому что свойство attributes только для чтения .

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

На самом деле, если вы заранее знаете какие атрибуты / свойства должны быть установлены, вы все равно можете установить их динамически: 

<a id=[[userGivenId]]
   class$=[[userGivenClass]]
   ...
></a>

В любом случае, существует директива lit-html, созданная open-wc и называемая spread , которая делает то, что вы хотите. Для этого потребуется переписать ваш компонент с использованием LitElement примерно так: 

import { LitElement, html, property, customElement } from 'lit-element';
import { repeat } from 'lit-html/directives/repeat';
import { spread } from '@open-wc/lit-helpers';

@customElement('my-element')
export class MyElement extends LitElement {
  @property() userGivenId;
  @property() links;
  // ...

  render() {
    return html`

      ${repeat(this.links, link => html`

        <a ...=${spread({
             id: this.userGivenId,
             '?my-boolean-attribute': true
             '.myProperty': { foo: 'bar' },
             '@my-event': () => console.log('my-event fired'),
           })}
           class="nav-item nav-link mr-md-2" 
           @click=${e => this.changePage(e)}
        >${link.title}</a>

      `)}

    `;
  }
}

С некоторыми ограничениями PolymerElement s и LitElement s могут сосуществовать в одном проекте, поэтому преобразование одного компонента не должно вызывать любая проблема.

...