jquery - DOM 上类似于电子表格的公式

Question

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

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

我看到了一些可能有能力的东西，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')
});

Answer 1

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

Knockout.js 在 JavaScript 中实现 mvvm 模式。以下是他们定义 MVVM 的方式:

MVVM and View Models Model-View-View Model (MVVM) is a design pattern for building user interfaces. It describes how you can keep a potentially sophisticated UI simple by splitting it into three parts:

A model: your application’s stored data. This data represents objects and operations in your business domain (e.g., bank accounts that can perform money transfers) and is independent of any UI. When using KO, you will usually make Ajax calls to some server-side code to read and write this stored model data.

A view model: a pure-code representation of the data and operations on a UI. For example, if you’re implementing a list editor, your view model would be an object holding a list of items, and exposing methods to add and remove items.

Note that this is not the UI itself: it doesn’t have any concept of buttons or display styles. It’s not the persisted data model either - it holds the unsaved data the user is working with. When using KO, your view models are pure JavaScript objects that hold no knowledge of HTML. Keeping the view model abstract in this way lets it stay simple, so you can manage more sophisticated behaviors without getting lost.

A view: a visible, interactive UI representing the state of the view model. It displays information from the view model, sends commands to the view model (e.g., when the user clicks buttons), and updates whenever the state of the view model changes.

When using KO, your view is simply your HTML document with declarative bindings to link it to the view model. Alternatively, you can use templates that generate HTML using data from your view model.

因此，您将创建“模型”，其中包括电子表格中的数据以及重新计算数据所需的任何函数。然后您将获得 View ，当用户更改页面上的内容时，该 View 会自动更新(也称为重新计算)数据。

http://knockoutjs.com