javascript - 如何独立使用 Polymer TemplateBinding 库？

Question

Polymer’s TemplateBinding library extends the capabilities of the HTML Template Element by enabling it to create, manage, and remove instances of content bound to data defined in JavaScript. Although internal in Polymer, it is also useful standalone.

TemplateBinding是独立的库，不依赖于 Polymer。因此理论上可以在没有 polymer 的情况下使用它。

我找不到任何如何使用这个独立的示例。

例如，我有这样的标记

<ul>
    <template id="colors" repeat="{{ colors }}">
      <li style="color: {{ color }}">The style attribute of this list item is bound</li>
    </template>
</ul>

和 json

colors: [
          { color: 'red' },
          { color: 'blue' },
          { color: 'green' },
          { color: 'pink' }
        ]

我正在寻找类似函数的东西，它接受模板和数据并返回处理后的标记。

Answer 1

独立是什么意思？您的意思是在 Polymer Web 组件之外使用 Polymer？

如果是这样，您可以使用自动绑定(bind)属性，例如

<template id="colors" repeat="{{ colors }}" is="auto-binding">

这将允许 Polymer 在 Light-DOM 中看到您的模板(页面上的任何位置)

这是一个工作 fiddle :http://jsfiddle.net/Lm7tgbLo/

HTML 代码:

<script src="http://www.polymer-project.org/polymer.min.js"></script>

<ul>
    <template id="colors" repeat="{{color in colors}}" is="auto-binding">
      <li style="color: {{ color }}">The style attribute of this list item is bound</li>
    </template>
</ul>

JavaScript:

window.addEventListener('polymer-ready', function (e) {

    document.getElementById("colors").colors = ['red', 'blue', 'green', 'pink'];

});