Tangle：一个开源的数据交互式JS库

Tangle是一个用来创建reactive文档的开源JavaScript库。用户可以交互式地探索各种浏览数值，修改各种参数、并且立即更新。

这是一个简单的reactive文档：

当你吃完3块饼干，你就会消耗150卡路里的热量。

下面是HTML的例子。

1

2

When you eat <span data-var="cookies"  class="TKAdjustableNumber"> cookies </span>,

you consume <span data-var="calories"> calories</span>.

这个data-var属性指定一个变量。通常用它在某种程度上来显示变量的值，或指定一个类应该调整哪个变量。

1

var tangle = new Tangle (rootElement, model);

创建一个tangle 对象，rootElement为类Tangle的元素或一个变量，类初始化以及模型设置如下所述：

1

2

3

4

5

tangle.setModel(newModel);

tangle.setModel({

  initialize: function () { this.cookies = 3; },

  update:  function () { this.calories = this.cookies * 50; }

});

下面是关于Tangle的JavaScript的例子：

1

2

3

4

var tangle = new Tangle(document, {

  initialize: function () { this.cookies = 3; },

  update:  function () { this.calories = this.cookies * 50; }

 });

像往常一样，使用HTML和CSS书写文档。使用专门的HTML属性来表示变量。编写一些JavaScript来指定变量如何调用，最后Tangle把它们封装在一起。

想了解更多关于Tangle，请参阅：http://worrydream.com/Tangle/reference.html