具有流星处理反应性的可拖动 UI 值(参见布雷特·维克多的纠结)

Bret Victor几年前为响应式文档创建了一个名为Tangle的酷库。您可以在此处看到一个示例：http://worrydream.com/Tangle/TangleTemplate.html

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

我最初的想法是利用TangleKit的UI元素(http://worrydream.com/Tangle/TangleKit/)也许是通过用JS文件创建一个包？我不知道最好的方法，也不知道是否还有其他方法。因此，寻求建议或想法，以达到Meteor的最终结果。

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

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

感谢您的指导。这对我来说是全新的。

-------更新日期：4/14晚上9点PST-

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

咖啡：

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>

看起来你可以直接使用Tangle，在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文件夹中，以便将其发送到客户端。

相关内容

最新更新

热门标签：