#polymer #polymer-1.0 #plunker #iron-data-table #polymer-1.x
#polymer #polymer-1.0 #плунжер #железо-таблица данных #polymer-1.x
Вопрос:
Может кто-нибудь указать мне на шаблон, который форматирует (или предварительно обрабатывает) элементы данных, входящие в повторитель (например iron-list
, или iron-data-table
), например?
Другими словами, рассмотрим этот план, например. Допустим, я хотел добавить поле для каждого пользователя и отобразить его в списке; давайте назовем его namelength
where:
item.user.namelength = item.user.name.first.length item.user.name.last.length
Как (где в HTML или JS и с использованием какого шаблона) мне лучше всего подойти к этой задаче предварительной обработки?
content-el.html
<base href="https://polygit.org/polymer :master/iron-data-table Saulis :master/components/">
<link rel="import" href="polymer/polymer.html">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="iron-ajax/iron-ajax.html">
<link rel="import" href="paper-button/paper-button.html">
<link rel="import" href="iron-data-table/iron-data-table.html">
<dom-module id="content-el">
<template>
<style></style>
<iron-ajax
auto
url="https://saulis.github.io/iron-data-table/demo/users.json"
last-response="{{users}}">
</iron-ajax>
<iron-data-table items="[[users.results]]">
<data-table-column name="Picture" width="50px" flex="0">
<template>
<img src="[[item.user.picture.thumbnail]]">
</template>
</data-table-column>
<data-table-column name="First Name">
<template>[[item.user.name.first]]</template>
</data-table-column>
<data-table-column name="Last Name">
<template>[[item.user.name.last]]</template>
</data-table-column>
<data-table-column name="Email">
<template>[[item.user.email]]</template>
</data-table-column>
</iron-data-table>
</template>
<script>
(function() {
'use strict';
Polymer({
is: 'content-el',
});
})();
</script>
</dom-module>
Ответ №1:
Например.
<data-table-column name="Name Length">
<template>{{_len(item.user.name.first, item.user.name.last)}}</template>
</data-table-column>
…
(function() {
'use strict';
Polymer({
is: 'content-el',
_len: function(first, last) {
return first.length last.length;
}
});
})();
Ответ №2:
Вы могли бы использовать вычисляемую привязку, которая предварительно user.results
обрабатывает, добавляя namelength
поле, которое вы описали:
// template
<iron-data-table items="[[_getUserData(users.results)]]">
...
<data-table-column name="Name Length">
<template>[[item.user.namelength]]</template>
</data-table-column>
</iron-data-table>
// script
Polymer({
is: 'content-el',
_getUserData: function(items) {
items.forEach(function(item) {
var user = item.user;
user.namelength = user.name.first.length user.name.last.length;
});
return items;
}
});