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：

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

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

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

视图：表示视图状态的可见交互式UI   模型。它显示视图模型中的信息，发送命令   视图模型（例如，当用户点击按钮时）和更新   只要视图模型的状态发生变化。

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

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

http://knockoutjs.com

Answer 2

我只是开发解析公式的插件，在其核心使用jison解析器，目前公式仍然限于sum，avg，min和max，但会根据要求添加更多功能。

http://xsanisty.com/calx/

Answer 3

您所描述的内容听起来很像“{3}}或Sproutcore中的”绑定“和”计算属性“。

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

您可以像这样解决问题：

将vars存储在您希望通过$('myDomElement').data('varX',data);
通过重载该DOM节点的setData-method $("myDomElement").bind("setData", function(key,value){ setTimeout(function() { $("myDomElement").trigger("formula"); },10); return value; });
并最终创建您的更新公式 $('myDomElement').bind("formula",function() { this.html(foo()); });

Woehoe，我重读了你的帖子，发现你并没有真正指明你有存储数据的变量......而是你得到了细胞......

在这种情况下，您只需将changeHandler添加到更新公式的单元格中。

嗯，实际上，我想我忘记了问题是什么，看起来有点太明显我想在这里...对不起，如果没有帮助

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

我也发现了这一点，这可能与您的电子安全方法有关： using jquery.data to detect form changes

更重要的是，我同意以前的答案，你总是可以使用一个框架 - 我个人更喜欢jsmvc

DOM上的类似电子表格的公式

6 个答案:

Backbone.js的

Knockout.js