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

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

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

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

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

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

EDIT: Я также 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')
});

Ответ 1

Вы можете использовать knockout.js для получения требуемой функциональности.

Knockout.js реализует шаблон mvvm в вашем javascript. Вот как они определяют MVVM:

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

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

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

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

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

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

Итак, вы создадите свою "модель", которая включает в себя данные в электронной таблице, а также любые функции, необходимые для пересчета данных. Затем вы получите свое представление, которое автоматически обновляет (ака пересчитывает) данные, поскольку пользователь меняет информацию на странице.

http://knockoutjs.com

Ответ 2

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

http://xsanisty.com/calx/

Ответ 3

То, что вы описываете, очень похоже на "привязки" и "вычисленные свойства" из Sproutcore или Ember.js.

Ответ 4

Посмотрите jQuery Calculation Plug-in. Но я не уверен, можете ли вы определить любую формулу

Ответ 5

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

Backbone.js

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

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

Knockout.js

http://www.knockoutjs.com/

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

Ответ 6

Вы можете подойти к такой проблеме:

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

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

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

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

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

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

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