MDL обновляет все элементы динамического списка на каждой вкладке - PullRequest
Новая
       23

MDL обновляет все элементы динамического списка на каждой вкладке

1 голос
/ 21 марта 2019

У меня есть 4 вкладки MDL, где я динамически создаю список карт MDL в каждой. Каждая карта имеет MDL-меню, созданное так: 

// job settings dropdown :
settingsButton.setAttribute('id', 'jobSettings');
var jobUl = document.createElement('ul');
jobUl.className = 'mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect';
jobUl.setAttribute('for', 'jobSettings');
var jobLi = document.createElement('li');
var jobLi2 = document.createElement('li');
var jobLi3 = document.createElement('li');
jobLi.className = 'mdl-menu__item';
jobLi2.className = 'mdl-menu__item';
jobLi3.className = 'mdl-menu__item';
jobLi.textContent = 'Edit';
jobLi2.textContent = 'Delete';
jobLi3.textContent = 'Pay';
jobUl.appendChild(jobLi);
jobUl.appendChild(jobLi2);
jobUl.appendChild(jobLi3);

Что будет отображаться в HTML примерно так: 

<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
    for="demo-menu-lower-right">
  <li class="mdl-menu__item">Edit</li>
  <li class="mdl-menu__item">Delete</li>
  <li class="mdl-menu__item">Pay</li>

Затем я делаю componentHandler.upgradeDom();, надеясь обновить пункты меню mdl в каждом неупорядоченном списке (ul).

Кажется, это работает только для ОДНОГО элемента списка (li) на всем сайте. это не работает для любого другого элемента на любой другой вкладке. Как мне заставить мое mdl-меню работать с каждым динамически создаваемым элементом списка в каждом динамически создаваемом ul?

1 Ответ

0 голосов
/ 21 марта 2019

Проблема может заключаться в том, что вы дублируете значение id для нескольких элементов меню (MDL будет сбит с толку, если имеется более одной кнопки со значением id, которое соответствует значению for в вашем элементе меню),Вы можете добавить числовое приращение к значениям id и for, чтобы обеспечить уникальную идентификацию каждого меню.

См. Следующий пример.Обратите внимание, что Object.assign используется для небольшого сокращения кода, но из-за ограничений нам все еще нужно использовать setAttribute для установки атрибута for элемента ul, так как этот атрибут не доступен напрямую. 

const fragment = document.createDocumentFragment();

const addCard = (n) => {
  let card = document.createElement('div');
  let menu = document.createElement('div');
  let button = document.createElement('button');
  let icon = document.createElement('i');
  let list = document.createElement('ul');
  let items = ['Action 1', 'Action 2', 'Action 3'];
  icon.textContent = 'more_vert';
  
  Object.assign(card, {className: 'mdl-card mdl-shadow--2dp'});
  Object.assign(menu, {className: 'mdl-card__menu'});
  Object.assign(button, {
    className: 'mdl-button mdl-js-button mdl-button--icon',
    id: 'menu' + n
  });
  Object.assign(icon, {className: 'material-icons'});
  Object.assign(list, {
    className: 'mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect'
  });
  list.setAttribute('for', 'menu' + n);
  
  fragment.appendChild(card);
  card.appendChild(menu);
  menu.appendChild(button);
  button.appendChild(icon);
  menu.appendChild(list);
  for (let item of items) {
    let listItem = document.createElement('li');
    listItem.textContent = item;
    Object.assign(listItem, {className: 'mdl-menu__item'});
    list.appendChild(listItem);
  }
  
}

for (let i = 0; i < 2; i++) {
  addCard(i);
}
document.querySelector('#container').appendChild(fragment);
componentHandler.upgradeDom();
.mdl-card {
  margin: 8px;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Material Design Lite Cards / Menus</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
  </head>
  <body>
    <div id="container"></div>    
    <script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
  </body>
</html>
...