聚合物,评估基于对象的元素

时间:2015-08-26 19:13:32

标签: javascript polymer

我正在使用来自聚合物霓虹灯元素的瓷砖示例 - 我正在努力使每个展开的瓷砖都独一无二。我第一次尝试如何执行此操作是使用网格项(如

)传递一个字符串
 {
      value: 1,
      color: 'blue',
      template: 'slide-1'
 }

当在一个像这样的新元素中渲染时,要对该元素进行求值。 (这是卡模板本身)

<template>

<div id="fixed" class$="[[_computeFixedBackgroundClass(color)]]"></div>

<div id="card" class$="[[_computeCardClass(color)]]">
  <[[item.template]]></[[item.template]]>
</div>

这不起作用 - 但是我想知道是否有某种方法可以做到这一点,所以我可以为每张卡的内容加载自定义元素。作为参考 - https://elements.polymer-project.org/elements/neon-animation?view=demo:demo/index.html&active=neon-animated-pages,它是网格示例,我试图在点击每张卡片后替换每张卡片的内容(fullsize-page-with-card.html,这里是所有的html - https://github.com/PolymerElements/neon-animation/tree/master/demo/grid)。这是接近这个的错误方法吗?或许我在这里有一些语法错误。谢谢!

编辑:好的,所以我可以发送它,如果我将它添加到点击打开卡就像这样

   scope._onTileClick = function(event) {
        this.$['fullsize-card'].color = event.detail.data.color;
        this.$['fullsize-card'].template = event.detail.data.template;
        this.$.pages.selected = 1;
    };

和卡片的属性如此

 template: {
    type: String
  },

因此我可以将其评估为[[模板]],但问题仍然是如何使用此字符串调用自定义元素(动态)。我可以通过一些属性并填写卡片或表格,这样它们就是独一无二的,但我想如果我可以在每张卡片中调用自定义元素,我会有更多的创作自由。

0 个答案:

没有答案