DataBinding¶
Data binding is a linking between elements and sources.
Description¶
Data binding allows synchronize property values of two different objects. One is conditionally called element while another is source. Elements are often representations of visual view while sources are - data sources. Typically that doesn’t matter which element will be the element and wich be the source because both represent the same interface. Objects that can bind data are all types of visual elements, all types of Data Sources and View Parameters.
Any data binding can be representd as non-visual programm object which can define the data conversion rules for both element and source, as well as desirable direction of data streams in binding mode:
- Bi-directional exchange between element and source - if source has got updates then element gets updated otherwise if element has got updates then element gets updated accordingly.
- To source updates - if source has got updates then no change to element is done, otherwise if element has got updates then source gets updated.
- To element update - if source has got updates element gets updated otherwise source gets no update.
Data binding thus conceals complexity of synchronizing between elements and sources and simplifies the code to great extent and makes behaviour of all elements controllable.
Usage¶
//js-demo
var element = new InfinniUI.TextBox();
var $element = element.render();
element.setLabelText("Element");
var source = new InfinniUI.TextBox();
var $source = source.render();
source.setLabelText("Source");
var binding = new InfinniUI.DataBinding();
binding.setMode('ToSource');
binding.bindSource(source, 'value');
binding.bindElement(element, 'value');
$elementForExample.append($element);
$elementForExample.append($source);
Methods¶
Name | Description |
---|---|
getMode | Returns direction of data stream in binding mode |
setMode | Sets direction of data stream in binding mode |
getConverter | Returns data converter between element and source |
setConverter | Sets data converter between element and source |
bindSource | Sets binding to source |
getSource | Returns data source binding |
getSourceProperty | Returns path to data source property binding |
bindElement | Sets binding to element |
getElement | Returns element binding |
getElementProperty | returns path to element binding property |
getDefaultValue | Returns element defaul value |
setDefaultValue | Sets default value for element |
DataBinding.metadata¶
Метаданные типа DataBinding.
Properties¶
Name | Type | Default | Description |
---|---|---|---|
Source* | String |
– | Наименование источника данных привязки |
Property | String |
– | Путь к свойству источника данных привязки |
Mode | BindingMode | TwoWay |
Направление потока данных в привязке |
Converter | BindingConverter | – | Преобразователь данных между элементом и источником |
* Обязательное свойство.
Examples¶
Метаданные поля ввода, привязанного к параметру Parameter_1:
{
"TextBox": {
"Value": {
"Source": "Parameter_1"
}
}
}
Пусть теперь поле ввода привязано к полю Name источника данных DataSource_1. И пусть при изменении источника, необходимо обновлять поле ввода, но изменение значения поля ввода не должно влиять на значение в источнике. Тогда метаданные выглядят так
{
"TextBox": {
"Value": {
"Source": "DataSource_1",
"Property": "Name",
"Mode": "ToElement"
}
}
}
Пример, когда данные необходимо конвертировать:
{
"TextBox": {
"Value": {
"Source": "DataSource_1",
"Property": "Name",
"Converter": {
"ToElement": "{ return args.value == '-' ? 'minus': 'plus'; }",
"ToSource": "ConvertTextBoxToDataSource_1" //выполнится скрипт из контекста родительской view
}
}
}
}