Question

几年前，Bret Victor为反应文档创建了一个名为Tangle的酷库。你可以在这里看到一个例子： http://worrydream.com/Tangle/TangleTemplate.html

我喜欢拖拽价值的简单方法。我正在尝试构建一个简单的抵押贷款计算器，您可以拖动利率，年限等。我希望在我的UI中做类似的事情并让Meteor处理反应。

我最初的想法是利用TangleKit（http://worrydream.com/Tangle/TangleKit/）的UI元素，也许是通过从JS文件创建一个包？我不知道最好的方式或是否有其他方法。所以寻找建议或想法，以便通过Meteor获得最终结果。

完整的文档在这里： http://worrydream.com/Tangle/download.html

Git回购在这里： https://github.com/worrydream/Tangle

感谢您提供任何指导。这对我来说都是新的。

-------太平洋标准时间下午9点14分更新

仍然没有运气，但我认为接近。见下文。

COFFEE：

if Meteor.isClient
    console.log "Client is alive."
    Session.set("cookies", 4)

    Template.reactive.cookies = () ->
        Session.get("cookies")

    Template.reactive.calories = () ->
        Session.get("cookies") * 50

    Template.reactive.events
        'click .EditableValue': () ->
            newCookies = Math.round(accounting.formatNumber((Random.fraction() * 10),1))
            Session.set("cookies", newCookies)

    Template.example.rendered = () ->
        element = @find("#example") # Searches only within this template
        tangle = new Tangle(element,
          initialize: ->
            @cookies = 4
            @caloriesPerCookie = 50

          update: ->
            @calories = @cookies * @caloriesPerCookie

            # Insert your Meteor updating code here, for example:
            Session.set("cookiesQuantity", @cookies)
            )
    Template.example.cookies2 = () ->
        Session.get("cookiesQuantity")

if Meteor.isServer
    console.log "Server is alive."

HTML：

<head>
  <title>Reactive Document</title>
</head>

<body>
    {{> reactive}}
    {{> example}}
</body>

<template name="reactive">
    <h5>This is a simple reactive document.</h5>
    <h4 id="example">When you eat <span class="EditableValue"> {{cookies}} cookies</span>, you will consume <span class="ReactiveValue"> {{calories}} calories</span>.</h4>
</template>

<template name="example">
  <p>This is a simple reactive document.</p>
  <p id="example">When you eat <span data-var="cookies"
   class="TKAdjustableNumber" data-min="2" data-max="100"> cookies</span>, you 
   will consume <span data-var="calories"></span> calories.</p>
   {{cookies2}}
</template>

Answer 1

看起来您可以按原样使用Tangle，并在纠结的update函数中添加一行或两行来告诉Meteor有关更改。

以您链接的示例为例，将页面转换为Meteor模板：

<template name="example">
  <p>This is a simple reactive document.</p>
  <p id="example">When you eat <span data-var="cookies"
   class="TKAdjustableNumber" data-min="2" data-max="100"> cookies</span>, you 
   will consume <span data-var="calories"></span> calories.</p>
</template>

然后在该模板的rendered回调中初始化Tangle：

Template.example.rendered = function () {
  var element = this.find("#example"); // Searches only within this template

  var tangle = new Tangle(element, {
    initialize: function () {
      this.cookies = 4; // Or Session.get("cookiesQuantity"), for example
      this.caloriesPerCookie = 50;
    },
    update: function () {
      this.calories = this.cookies * this.caloriesPerCookie;
      // Insert your Meteor updating code here, for example:
      Session.set("cookiesQuantity", this.cookies);
    }
  });

并确保将Tangle的文件放在client/lib/tangle文件夹中，以便将它们发送到客户端。

具有流星处理反应性的可拖动UI值（请参阅Bret Victor的纠结）

1 个答案: