Связывание класса полимера внутри Dom-Repe не работает
Я пытаюсь привязать вычисленное значение к элементу внутри шаблона dom-repeat.
<iron-selector class="dropdown-content" selected="0">
<template is="dom-repeat" items="[[items]]">
<div class$="item {{_itemClass(selectedItems)}}" data-value="[[item]]" on-click="_onItemClick">[[item]]</div>
</template>
</iron-selector>
Моя цель - обновить стили выпадающих элементов, когда пользователь выбирает один из них. Когда это происходит, я обновляю selectedItems массив, нажав на значение элемента к нему. Это вызовет рендеринг поля выбора, но не вызовет _itemClass(selectedItems) выражение.
Что мне здесь не хватает? Я прочитал в документации, что вы должны указать свойства, которые будут вызывать привязку, и я делаю это, добавляя selectedItems к обязательному выражению без всякой удачи.
Я приложил фрагмент с текущим поведением.
Любая помощь будет приветствоваться.
<!doctype html>
<head>
<meta charset="utf-8">
<!-- polygit -->
<base href="https://polygit.org/components/"> <!-- saves typing! -->
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="iron-icons/iron-icons.html">
<link rel="import" href="iron-dropdown/iron-dropdown.html">
<link rel="import" href="iron-selector/iron-selector.html">
<!-- style -->
<style>
x-example {
width: 250px;
}
</style>
</head>
<body>
<x-example></x-example>
<dom-module id="x-example">
<style include="iron-flex iron-flex-alignment"></style>
<style>
:host {
position: relative;
border: 1px solid blue;
display: block;
}
.body {
@apply --layout-horizontal;
}
.body .selection {
border: 1px solid green;
margin: 2px;
flex-grow: 1
}
.body .selection .item {
display: inline-block;
margin: 2px;
background: lightgreen;
padding: 2px 5px;
border: 1px solid green;
border-radius: 4px;
color: darkblue;
}
.body .selection .item .text {
display: inline-block;
}
.body .selection .item iron-icon {
width: 18px;
cursor: pointer;
}
.body .dropdown {
border: 1px solid yellow;
margin: 2px;
cursor: pointer;
min-height: 40px;
}
.body .dropdown iron-icon {
margin: auto;
}
.options iron-dropdown {
border: 1px solid grey;
border-radius: 6px;
overflow: hidden;
}
.options .item {
cursor: pointer;
}
iron-selector>* {
padding: 8px;
background: aqua;
}
.horizontal-section {
padding: 0;
}
.iron-selected {
background-color: var(--google-blue-500);
color: white;
}
</style>
<template>
<div class="body">
<div class="flex selection">
<template is="dom-repeat" items="[[selectedItems]]">
<div class="item">
<div class="text">[[item]]</div>
<iron-icon class="dropdown-trigger" icon="icons:clear" on-click="_onRemoveItem"></iron-icon>
</div>
</template>
</div>
<div class="dropdown" on-click="_toggleDropdown">
<iron-icon icon="icons:arrow-drop-down"></iron-icon>
</div>
</div>
<div class="options">
<iron-dropdown auto-fit-on-attach="true" id="dropdown" horizontal-align="left" vertical-align="top">
<iron-selector class="dropdown-content" selected="0">
<template is="dom-repeat" items="[[items]]">
<div class$="item {{_itemClass(selectedItems)}}" data-value="[[item]]" on-click="_onItemClick">[[item]]</div>
</template>
</iron-selector>
</iron-dropdown>
</div>
</template>
<script>
// only need this when both (1) in the main document and (2) on non-Chrome browsers
addEventListener('WebComponentsReady', function() {
Polymer({
is: "x-example",
properties: {
items: {
type: Array,
value: ["One", "Two", "Three"]
},
selectedItems: {
type: Array,
value: []
}
},
_toggleDropdown: function() {
this.$.dropdown.toggle();
},
_onItemClick: function(e) {
var value = e.srcElement.dataValue;
if (this.selectedItems.indexOf(value) >= 0) {
return;
}
this.push("selectedItems", value)
this._refreshDropdown();
},
_refreshDropdown: function() {
this.async(function() {
this.$.dropdown.position();
})
},
_onRemoveItem(e) {
let index = this.selectedItems.indexOf(e.srcElement.dataValue);
this.splice("selectedItems", index, 1);
this._refreshDropdown();
},
_itemClass: function() {
console.log("item class called")
}
});
});
</script>
</dom-module>
</body>2 ответа
Я не проверял вашу проблему, но сам использую аналогичную схему. Я предполагаю, что Polymer не поддерживает объявление класса и связанный класс в одном и том же теге.
Вместо этого я использую атрибуты и селекторы атрибутов, что работает так, как ожидалось.
Можете ли вы попробовать изменить класс на атрибут и стиль, основанный на селекторах атрибутов? Вот соответствующий код:
<style>
.item[selected] {
font-weight: bold;
}
</style>
...
<template is="dom-repeat" items="[[items]]">
<div class="item" selected$="[[_computeSelected]]" on-tap="_onItemTap">[[item]]</div>
</template>
_onItemTap: function(event) {
const item = event.model.item;
},
_computeSelected: function(item) (
return yourSelectionLogic ? true : false;
}
Два других примечания: Используйте на нажатие вместо на нажатие. Это делает мобильные события касания нормализованными с событиями рабочего стола. Кроме того, вам не нужно связывать значение данных для каждого элемента, так как оно включается через событие tap, когда оно запускается внутри dom-repeat.
Ваша привязка _itemClass(selectedItems) которая срабатывает только при изменении переменной selectedItems, а не при изменении массива.
У вас есть два варианта:
1) Либо измените свою привязку на _itemClass(selectedItems.*), который будет вызван this.push и другие методы мутации массива
2) Меняйте переменную каждый раз:
this.set('selectedItems', [].concat(this.selectedItems).concat(value));
Рабочий пример с первым решением (и вторым закомментированным решением) доступен здесь