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 Component之外使用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' }
});

如何独立使用Polymer TemplateBinding库？

2 个答案: