9. DataBinding во View

Допустим, у нас есть вот такой компонент: 

<Title text="Hello {/recipient/firstName} {/recipient/lastName}" id="myControl123" />

и мы хотим кодом поменять в нём значение.

Не делайте так: 

var oTitle = this.getView().byId("myControl123");
oTitle.setText("Hello John Doe");

Делайте так: 

<Title text="Hello {pageModel>/recipient/firstName} {pageModel>/recipient/lastName}" id="myControl123" />

this.getView().setProperty("/recipient", {
	firstName: "Vasily",
	lastName: "Pupkin"
});

Почему?

Потому что эти же данные могут использовать и другие компоненты, в таком случае при каждом изменении данных вы будете вынуждены выбирать кучу компонентов по ID и присваивать им новые значения.
А в случае с binding -- пересборка значений выполнится автоматически.

И потому что это упрощает логику: все данные состояния на странице будут описываться одним JSON'ом. И таким образом код очень просто отлаживать. Тот самый Data-Driven

One-way и two-way binding

В описанном выше примере мы присваивали значение в модель из JavaScript.
Но может произойти и обратный процесс: 

<Input value="{pageModel>/myinputvalue}" />

<Text text="{pageModel>/myinputvalue}" />

У нас есть инпут, с биндингом к локальной модели. Т.е. при каждом изменении содержимого инпута -- сама View записывает новое значение в Model

И значение Text -- автоматически обновляться in RealTime без какого-либо дополнительного кода.

Этот two-way binding (когда View не только получает данные, но и отправляет данные в модель) доступен только в случае, если:

  1. Модель локальная (не oData)
  2. В binding-выражении нет никаких сложных обработок. И только одно значение.

Binding-выражения

В биндинг можно сложить и несколько значений.

Можно использовать подмножество JS (вызывать методы, использовать тренарные операторы, конкатенировать строки).

Можно использовать внешние методы по форматированию. (formatter)

<Title text="Hello {/recipient/firstName} {/recipient/lastName}" id="myControl123" />


<Title text="{= ${/recipient/firstName} ? ${/recipient/firstName} : 'Безымянный' }" />


<Title text="{ path : '/recipient/firstName' , formatter : '.formatter.fomatName '}" />

<!-- где .formatter.fomatName -- метод в контроллере -->

См. также