如何独立使用 Polymer TemplateBinding 库？

Question

Polymer 的 TemplateBinding 库扩展了 HTML 的功能 模板元素通过使其能够创建、管理和删除 绑定到 JavaScript 中定义的数据的内容实例。虽然 在 Polymer 中，它也可以独立使用。

TemplateBinding 是独立的库，不依赖于 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？

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

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

这将允许 Polymer 在 Light-DOM（页面上的任何位置）中查看您的模板

这是一个有效的小提琴：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'];

});

Answer 2

如果您只是在寻找一个好的基于模板的 UI 库。我推荐 RactiveJS。 https://ractive.js.org/

它很容易上手。

模板

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

JS 代码

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