Табличные формулы в DOM

Question

Я ищу способ динамического связывания формул в моем DOM.

У нас есть приложение с интенсивным использованием данных, и в настоящее время я пишу много обработчиков, чтобы попытаться пересчитать и обновить соответствующие ячейки.Тем не менее, это подвержено ошибкам.

Я видел что-то, что может быть способно, hashigo .Однако он не обновлялся примерно полтора года.

Кто-нибудь знает что-то подобное, находящееся в стадии активной разработки?Я искал, но это все, что мне удалось найти.

В идеале мне нужно только настроить формулу, и она будет обрабатывать мониторинг, если поля в формуле изменились, и соответствующим образом обновлять значение.

РЕДАКТИРОВАТЬ: Я также jQuerySheet однако это гораздо больше, чем я могу использовать, мне просто нужна формула разбора аспекты этого.И его механизм вычислений, кажется, вращается вокруг ячеек с идентификатором столбца / строки.

EDIT2: Этот плагин jQuery Calculation приближается к тому, что мне нужно.

РЕДАКТИРОВАТЬ 3: В конечном итоге, я бы хотел написать что-нибудь простое, например

$('#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 реализует шаблон mvvm в вашем javascript.Вот как они определяют MVVM:

MVVM и View Models Model-View-View Model (MVVM) - это шаблон проектирования для создания пользовательских интерфейсов.Он описывает, как вы можете сохранить потенциально сложный пользовательский интерфейс простым, разделив его на три части:

Модель: данные вашего приложения.Эти данные представляют объекты и операции в вашей бизнес-сфере (например, банковские счета, которые могут осуществлять денежные переводы) и не зависят от какого-либо пользовательского интерфейса.При использовании KO вы обычно делаете Ajax-вызовы некоторого серверного кода для чтения и записи этих сохраненных данных модели.

Модель представления: представление данных и операций в пользовательском интерфейсе в чистом коде.Например, если вы реализуете редактор списков, ваша модель представления будет представлять собой объект, содержащий список элементов и предоставляющий методы для добавления и удаления элементов.

Обратите внимание, что это не сам пользовательский интерфейс: онне имеет понятия кнопок или стилей отображения.Это также не модель постоянных данных - она ​​содержит несохраненные данные, с которыми работает пользователь.При использовании KO ваши модели представления являются чистыми объектами JavaScript, которые не знают HTML.Сохранение абстракции модели представления таким образом позволяет ему оставаться простым, поэтому вы можете управлять более сложным поведением, не теряясь.

Представление: видимый интерактивный пользовательский интерфейс, представляющий состояние модели представления.Он отображает информацию из модели представления, отправляет команды модели представления (например, когда пользователь нажимает кнопки) и обновляется всякий раз, когда изменяется состояние модели представления.

При использовании KO ваше представление простоHTML-документ с декларативными привязками, чтобы связать его с моделью представления.Кроме того, вы можете использовать шаблоны, которые генерируют HTML с использованием данных из вашей модели представления.

Таким образом, вы создадите свою «модель», которая включает данные в электронную таблицу, а также любые функции, которые вам нужно пересчитать.данные.Тогда у вас будет ваше представление, которое автоматически обновляет (иначе пересчитывает) данные, когда пользователь меняет вещи на странице.

http://knockoutjs.com

Answer 2

Я только что разработал плагин, который анализирует формулу, используя jison parser в своей основе, в настоящее время формула все еще ограничена суммой, avg, min и max, но добавит больше функций по запросу.

http://xsanisty.com/calx/

Answer 3

Вы можете подойти к проблеме следующим образом:

• , храня переменные на DOM-узле, который вы хотите обновлять с помощью $('myDomElement').data('varX',data);
• путем перегрузки метода setData для этого узла DOM через $("myDomElement").bind("setData", function(key,value){ setTimeout(function() { $("myDomElement").trigger("formula"); },10); return value; });
• и, наконец, создать формулу обновления, например $('myDomElement').bind("formula",function() { this.html(foo()); });

Woehoe, я перечитал ваш пост и обнаружил, что вы на самом деле не указываете, что у вас есть переменные, в которых вы храните данные ... вместо этого у вас есть клетки ...

• в этом случае вы можете просто добавить changeHandler в ячейки, которые обновляют формулу.

хммм, вообще-то, я думаю, что забыл, в чем проблема, кажется слишком очевидным то, что я предполагаю здесь ... извините, если не помогу

в любом случае ... Я быстро просмотрел jquery для привязки данных, и я обнаружил, что вы можете связать setData / getData-events с $ .data: Что вы можете не знать о jquery

Я также нашел это, которое может или не может представлять интерес для вашего подхода к распределению: использование jquery.data для обнаружения изменений формы

Более того, я согласен с предыдущими ответами, вы всегда можете использовать фреймворк - лично я предпочитаю jsmvc

Answer 4

Вам понадобится фреймворк, такой как Backbone.js или Knockout

---

Backbone.js

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

Цитируется по Backbone: С Backbone вы представляете свои данные в виде моделей, которые можно создавать, проверять, уничтожать и сохранять на сервере. Всякий раз, когда действие пользовательского интерфейса вызывает изменение атрибута модели, модель вызывает событие «изменения»; все представления, отображающие состояние модели, могут быть уведомлены об изменении, чтобы они могли соответствующим образом реагировать, повторно предоставляя новую информацию. В готовом приложении Backbone вам не нужно писать связующий код, который просматривает DOM, чтобы найти элемент с определенным идентификатором, и обновлять HTML вручную - при изменении модели представления просто обновляются.

---

Knockout.js

http://www.knockoutjs.com/

Цитируется по Knockout JS: Инкапсулируя данные и поведение в модель представления, вы получаете чистую расширяемую основу, на которой можно создавать сложные пользовательские интерфейсы, не теряясь в путанице обработчиков событий и ручных обновлений DOM. .

Answer 5

Взгляните на Модуль расчета jQuery . Но я не уверен, что вы можете определить любую формулу

Answer 6

То, что вы описываете, очень похоже на "Bindings" и "Computed Properties" из Sproutcore или Ember.js .