DOM 上类似电子表格的公式

Question

我正在寻找一种在整个 DOM 中动态绑定公式的方法。

我们有一个数据密集型应用程序，目前我编写了许多处理程序来尝试重新计算和更新适当的单元格。但是，这很容易出错。

我看到了一些可能有能力的东西，hashigo。但是大约一年半没有更新了。

有没有人知道类似的东西正在积极开发中？我一直在寻找，但这就是我设法找到的全部。

理想情况下我只需要设置公式，它会监控公式中的字段是否发生变化，并相应地更新值。

编辑：我也 jQuerySheet 但是它比我可以使用的要多，我只需要公式解析它的各个方面。而且它的计算引擎似乎过于围绕具有列/行标识符的单元格。

EDIT2：这个jQuery Calculation 插件越来越接近我的需要了。

EDIT3：最终，我希望能够写出像

这样简单的东西

$('#output').formula(" ( SUM($('.x')) + $('#y') ) / ( funcThatReturnsValue() + 4 )");

这将导致#output 的值在.x 或#y 中的值发生更改时重新计算。

但是，我可能会设置像这样基本的东西

$('#output').formula({
    formula: "(SUM(x)+y)/(j+k)",
    variables: {
        x: $('.x'),
        y: $('#y'),
        j: function() {
            return 3;
        },
        k: 4
    }
    onblur: $('.x, #y')
});

Answer 1

您可以使用 knockout.js 来获得您正在寻找的功能。

Knockout.js 在您的 javascript 中实现了一个 mvvm 模式。以下是他们如何定义 MVVM：

MVVM 和视图模型模型-视图-视图模型 (MVVM) 是一种设计模式 用于构建用户界面。它描述了如何保持 通过将其拆分为三个部分来简化潜在复杂的 UI：

模型：您的应用程序存储的数据。此数据代表对象 和您的业务领域中的操作（例如，可以 执行汇款）并且独立于任何用户界面。使用KO时， 您通常会对一些服务器端代码进行 Ajax 调用以读取和 写入这个存储的模型数据。

视图模型：数据和操作的纯代码表示 一个用户界面。例如，如果你正在实现一个列表编辑器，你的视图 模型将是一个包含项目列表并公开方法的对象 添加和删​​除项目。

请注意，这不是 UI 本身：它没有任何概念 按钮或显示样式。它也不是持久化数据模型—— 它保存用户正在使用的未保存数据。使用KO时， 您的视图模型是纯 JavaScript 对象，不知道 HTML。以这种方式保持视图模型抽象让它保持简单， 这样您就可以管理更复杂的行为而不会迷失方向。

视图：表示视图状态的可见、交互式 UI 模型。它显示来自视图模型的信息，发送命令到 视图模型（例如，当用户单击按钮时），并更新 每当视图模型的状态发生变化时。

当使用 KO 时，您的视图只是带有声明性的 HTML 文档 绑定以将其链接到视图模型。或者，您可以使用 使用视图模型中的数据生成 HTML 的模板。

因此，您将创建包含电子表格中的数据的“模型”，以及重新计算数据所需的任何函数。然后，您将拥有自己的视图，当用户更改页面上的内容时，它会自动更新（也就是重新计算）数据。

http://knockoutjs.com

Answer 2

我只是开发了一个解析公式的插件，它的核心是jison parser，目前公式仍然限于sum、avg、min和max，但会根据需要添加更多功能。

http://xsanisty.com/calx/

Answer 3

您所描述的内容听起来很像来自Sproutcore 或Ember.js 的“绑定”和“计算属性”。

Answer 4

看看jQuery Calculation Plug-in。但我不确定你是否可以定义任何公式

Answer 5

你会想要一个像 Backbone.js 或 Knockout 这样的框架

---

Backbone.js

http://documentcloud.github.com/backbone/

引自 Backbone： 使用 Backbone，您可以将数据表示为模型，可以创建、验证、销毁并保存到服务器。每当一个 UI 动作导致模型的某个属性发生变化时，模型就会触发一个“变化”事件；所有显示模型状态的视图都可以收到更改通知，以便它们能够做出相应的响应，并使用新信息重新呈现自己。在完成的 Backbone 应用程序中，您不必编写查看 DOM 以查找具有特定 id 的元素并手动更新 HTML 的胶水代码 - 当模型更改时，视图会自动更新。

---

Knockout.js

http://www.knockoutjs.com/

引自 Knockout JS： 通过将数据和行为封装到视图模型中，您可以获得一个干净、可扩展的基础，在此基础上构建复杂的 UI，而不会迷失在事件处理程序和手动 DOM 的混乱中更新。

Answer 6

您可以这样处理问题：

• 通过将变量存储在要通过$('myDomElement').data('varX',data); 保持更新的DOM 节点上
• 通过重载该 DOM 节点的 setData 方法 $("myDomElement").bind("setData", function(key,value){ setTimeout(function() { $("myDomElement").trigger("formula"); },10); return value; });
• 并最终创建您的更新公式，例如 $('myDomElement').bind("formula",function() { this.html(foo()); });

Woehoe，我重读了你的帖子，发现你并没有真正指定你有存储数据的变量......而是你有单元格......

• 在这种情况下，您只需向更新公式的单元格添加一个 changeHandler ..

嗯，实际上，我想我忘记了问题是什么，我在这里假设的内容似乎有点太明显了......对不起，如果没有帮助

无论如何...我在数据绑定 jquery 上做了一个快速的 google，我发现你可以在 $.data 上绑定 setData/getData-events： What you might not know about jquery

我还发现了这一点，您的电子表格方法可能感兴趣也可能不感兴趣： using jquery.data to detect form changes

另外，我同意之前的回答，你总是可以使用框架——我个人更喜欢jsmvc