Saya menggunakan contoh ubin dari elemen neon polimer - dan saya mencoba membuat setiap ubin yang diperluas menjadi unik. Percobaan pertama saya tentang cara melakukan ini adalah dengan memasukkan string dengan item grid seperti
{
value: 1,
color: 'blue',
template: 'slide-1'
}
Dan mintalah elemen itu dievaluasi ketika dirender dalam elemen baru seperti ini. (ini adalah templat kartu itu sendiri)
<template>
<div id="fixed" class$="[[_computeFixedBackgroundClass(color)]]"></div>
<div id="card" class$="[[_computeCardClass(color)]]">
<[[item.template]]></[[item.template]]>
</div>
This does not work - however I am wondering if there is some way to do this so I can load custom elements for the content of each card. For reference -https://elements.polymer-project.org/elements/neon-animation?view=demo:demo/index.html&active=neon-animated-pages , it is the grid example and I am trying to replace the content of each card once it is clicked on ( the fullsize-page-with-card.html, here is all the html for it - https://github.com/PolymerElements/neon-animation/tree/master/demo/grid ). Is this the wrong way of approaching this? Or maybe I have some syntax wrong here. Thanks!
Sunting : Oke, Jadi saya bisa mengirimkannya jika saya menambahkannya ke klik untuk membuka kartu seperti itu
scope._onTileClick = function(event) {
this.$['fullsize-card'].color = event.detail.data.color;
this.$['fullsize-card'].template = event.detail.data.template;
this.$.pages.selected = 1;
};
dan di properti kartu seperti itu
template: {
type: String
},
Jadi saya kemudian dapat mengevaluasinya sebagai [[template]] , namun - pertanyaannya masih bagaimana memanggil elemen khusus (secara dinamis) menggunakan string ini. Saya dapat memberikan beberapa properti dan mengisi kartu atau formulir agar unik, namun menurut saya saya akan memiliki lebih banyak kebebasan berkreasi jika saya dapat memanggil elemen khusus di dalam setiap kartu.