javascript - polymer ,基于对象评估元素

标签 javascript polymer

我正在使用来自 polymer NEON 元素的瓦片示例 - 我正在尝试使每个展开的瓦片都独一无二。我第一次尝试如何执行此操作是将字符串与网格项一起传递,如

 {
      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
  },

因此我可以将其评估为 [[template]] ,但是 - 问题仍然是如何使用此字符串(动态地)调用自定义元素。我可以传递几个属性并填写一张卡片或表格,使它们独一无二,但我认为如果我可以在每张卡片中调用自定义元素,我会有更多的创作自由。

最佳答案

我有一个允许引用模板的元素。还有一些其他的,但是这个也允许数据绑定(bind)工作:https://github.com/Trakkasure/dom-bindref

关于javascript - polymer ,基于对象评估元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32234880/

相关文章:

javascript - 在 ember js 上安装 Bootstrap 4

javascript - 带有脚本的按钮在第二次单击后发送带有值的回发

javascript - 使用捆绑 javascript 中的 Xcode(自定义)build设置或预处理器指令

javascript - 在angularjs中,如何嵌入完整的HTML文档?

dart - 如何在 Polymer.dart 中使用 Material 设计的内置 css 颜色类?

dart - 如何从选择事件中获取选定菜单项的纸张菜单按钮

javascript - Angular 4 中的运行时绑定(bind)

html - 通过属性进行 polymer 数据绑定(bind)

javascript - Polymer <content> 无法在 Chrome 上运行?

javascript - 在创建 Polymer 元素的模板之前导入 html 文件