logo标签列表

类似于电子表格的公式在DOM上的应用

jqueryformula
12
我正在寻找一种动态绑定公式到整个DOM的方法。
我们有一个数据密集型应用程序，目前我编写许多处理程序来尝试重新计算和更新适当的单元格。但是，这很容易出错。
我看到了一些可能有能力的东西hashigo。但是它已经有一年半没有更新了。
有人知道类似的正在积极开发中的东西吗？我一直在搜索，但这是我找到的所有内容。
理想情况下，我只需要设置公式，它就会处理监视公式中的字段是否更改，并相应地更新值。
编辑：我也jQuerySheet，但它远远超出了我的使用范围，我只需要它的公式解析方面。而且它的计算引擎似乎过于依赖带有列/行标识符的单元格。
编辑2：这个jQuery Calculation插件越来越接近我所需的功能。
EDIT3: 最终，我希望能够编写出像这样简单的内容：

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

这将导致每当 .x 或 #y 中的值发生更改时，#output 的值被重新计算。
然而，对于像这样基本的设置，我可能需要进行一些配置。
$('#output').formula({
    formula: "(SUM(x)+y)/(j+k)",
    variables: {
        x: $('.x'),
        y: $('#y'),
        j: function() {
            return 3;
        },
        k: 4
    }
    onblur: $('.x, #y')
});
这个引起了我的注意，因为它让我想起了一家科技公司的面试问题。你能把公式表示成字符串有多重要？（我问这个问题是因为我有一个动态更新的想法，但我更愿意避免解析/eval。） - Jordan Gray
@JordanGray，这取决于情况，如果有解决方案的话，这可能并不重要。 - CaffGeek
这将是一件相当不错的事情。我会关注这个。 - MrBoJangles
6个回答
2
您可以使用knockout.js来获得您想要的功能。
Knockout.js在您的JavaScript中实现了MVVM模式。以下是他们如何定义MVVM的方式：
MVVM和视图模型模型-视图-视图模型（MVVM）是一种构建用户界面的设计模式。它描述了如何通过将UI分成三个部分来使潜在复杂的UI保持简单：
1. 模型：应用程序的存储数据。这些数据表示业务域中的对象和操作（例如，可以执行资金转移的银行账户），并且与任何UI无关。使用KO时，您通常会调用某些服务器端代码来读取和写入此存储的模型数据。
2. 视图模型：UI上数据和操作的纯代码表示。例如，如果您正在实现列表编辑器，则您的视图模型将是一个包含项目列表的对象，并公开添加和删除项目的方法。
请注意，这不是UI本身：它没有任何按钮或显示样式的概念。它也不是持久化数据模型 - 它保存用户正在使用的未保存数据。使用KO时，您的视图模型是纯JavaScript对象，不包含HTML的任何知识。以这种方式保持视图模型抽象可以使其保持简单，因此您可以管理更复杂的行为而不会迷失方向。
3. 视图：表示视图模型状态的可见交互式UI。它显示来自视图模型的信息，向视图模型发送命令（例如，当用户单击按钮时），并在视图模型状态更改时更新。
使用KO时，您的视图只是带有声明性绑定以将其链接到视图模型的HTML文档。或者，您可以使用使用视图模型数据生成HTML的模板。
因此，您将创建包括电子表格中的数据以及需要重新计算数据的任何函数的“模型”。然后，您将拥有自动更新（即重新计算）数据的视图，当用户在页面上更改内容时。 http://knockoutjs.com
1

我刚开发了一个插件，使用 jison 解析器作为核心，用于解析公式。目前该公式仅限于求和、平均值、最小值和最大值，但会根据需求添加更多函数。

http://xsanisty.com/calx/

0
你所描述的听起来很像是Sproutcore或者Ember.js中的"绑定"和"计算属性"。
0
你需要一个像Backbone.js或Knockout这样的框架。

Backbone.js

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

引用自Backbone： 使用Backbone，您可以将数据表示为模型(Model)， 可以创建、验证、销毁和保存到服务器。每当用户界面(UI)的操作导致模型的某个属性发生更改时，该模型会触发"change"事件; 显示模型状态的所有视图(Views)都可以被通知这个改变，以便它们能够相应地响应，使用新信息重新呈现自己。在完成的Backbone应用程序中，您不必编写粘合代码来查找具有特定id的元素并手动更新HTML - 当模型发生更改时，视图只需更新自身。

Knockout.js

http://www.knockoutjs.com/

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

0

您可以这样解决问题：

  • 通过将变量存储在您想要通过$('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()); });

哇喔，我重新阅读了您的帖子，并发现您并没有明确指定您有存储数据的变量...而是有单元格...

  • 在这种情况下，您只需向单元格添加changeHandler即可更新公式。

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

无论如何...我在谷歌上快速搜索了一下jQuery数据绑定，那就是我发现你可以在$.data上绑定setData/getData事件的地方： 你可能不知道的jQuery知识

我还发现了这个，可能与您的电子表格方法有关，也可能没有： 使用jquery.data检测表单更改

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

我发现了一些与第一个描述的方法非常相似的东西...它是javascriptmvc的一部分，但可以单独下载/使用：Observe.js（只需转到“构建自己的下载...”，它在Javascript的帮助函数下，是jquerymx的一部分） observe.js的文档 - Joehannes
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接