MGUI - Javascript MVVM binding GUI library

Небольшая библиотека с вычислителем выражений, собственной шиной сообщений, используемой для синхронизации модели вида (/vmodel), в которой отражены свойства визуальных компонентов и модели данных (/).

Может быть установлена прямая связь (меняешь значение атрибута в модели данных -> меняются свойства в модели вида, меняется свойство в модели вида -> меняется модель данных). Для этого в тексте атрибута надо записать текстовый адрес в формате {/env/clock#localTime}, без символа ‘=’

    'area3':{
      '#nodeClass':'area',
      '#css':'smallTextArea',
      '#editable':'true',
      '#text':'{/vmodel/pager/HOME/area1#width}'
    },

Связь может быть установлена в режиме чтения используя блок {= }. Дополнительно можно использовать операторы. Например ‘+’ Если в свойстве компонента #text написать {={/env/clock#localTime}+" – "+{/env/clock#localTime}} то текст будет автоматически составляться из значений указанных свойств узла модели данных.

    'area2':{
      '#nodeClass':'area',
      '#css':'smallTextArea',
      '#width':400,
      '#text':'{={/env/clock#localTime}+" -- "+{/env/clock#localTime}}'
    },
    

Библиотека распознает тип значений и выполняет операции сложения в зависимости от типа. Типы данных могут быть int, string, number, date Дла проведения вычислений и расстановки биндингов части выражений используется собственны парсер выражений в польскую запись RPE. После обработки выражений в модели связок хранятся аргументы выражений, чепочка интерпретированных команд.

English

This is a simple mock HTML-page to test functionality. At first, enter any date value inside the top field. Then, leave field. Library calculates text inside the second field using formula: {={/env/clock#localTime}+" – "+{/env/clock#localTime}} The third field contains linkage to the width property of the first field component.

When you change value in the third field and leave it, the width of the first field is changing interactively.

Installation

Just download and run index.html