Javascript 如何独立使用聚合物模板绑定库？

Polymer的TemplateBinding库扩展了HTML的功能 模板元素，使其能够创建、管理和删除 绑定到JavaScript中定义的数据的内容实例。虽然 在聚合物内部，它也是有用的

是独立的库，不依赖于聚合物。因此，从理论上讲，在没有聚合物的情况下使用它是可能的

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

例如，我有这样的标记

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

---

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

你说的独立是什么意思？你是说在聚合物网组件之外使用聚合物

如果是，则可以使用自动绑定属性，例如

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

---

如果你只是在寻找一个好的基于模板的UI库。我推荐RactiveJS。

这很容易开始

模板

---

是独立的库，不依赖于聚合物。因此，从理论上讲，在没有聚合物的情况下使用它是可能的。我正在寻找一个函数，它接受模板和数据并返回处理过的标记。

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

<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>

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

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

});

<p>{{greeting}} {{name}}!</p>

var ractive = Ractive({
  target: output,
  template: template,
  data: { greeting: 'Hello', name: 'world' }
});