Skip to content

Binding Types/Property Binding: remove references about deprecated third parameter of #bindProperty #184

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed

Binding Types/Property Binding: remove references about deprecated third parameter of #bindProperty #184

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
66 changes: 32 additions & 34 deletions docs/04_Essentials/property-binding-91f0652.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ In **JavaScript**, you can include the binding path within curly brackets as a s

```js
// "Input" required from module "sap/m/Input"
var oInput = new sap.m.Input({
const oInput = new sap.m.Input({
value: "{/company/name}"
});
```
Expand Down Expand Up @@ -71,20 +71,15 @@ In **JavaScript** views or controllers, you use a JS object instead of a string
// "Input" required from module "sap/m/Input"
// "BindingMode" required from module "sap/ui/model/BindingMode"

var oInput = new Input ({
const oInput = new Input ({
value: {
path: "/company/name",
mode: BindingMode.OneWay
}
});
```

Depending on the use case, it may be useful to define the binding at a later time, using the `bindProperty` method:

```js
oInput.bindProperty("value", "/company/name");
```

Depending on the use case, it may be useful to define the binding at a later time, using the `bindProperty` method.
This option also allows you to use the same object literal that you used in the constructor to define the binding:

```js
Expand Down Expand Up @@ -165,13 +160,16 @@ The `this` context of a formatter function is generally set to the control \(or
</mvc:View>
```

If you use **JavaScript**, you can pass the formatter function as a third parameter to the `bindProperty` method, or you can add the binding info with the `formatter` key. The `formatter` has a single parameter `value`, which is the value that is to be formatted, and is executed as a member of the control, meaning it can access additional control properties or model data.
If you use **JavaScript**, you can add the formatter function to the binding info with the `formatter` key. The `formatter` has a single parameter `value`, which is the value that is to be formatted, and is executed as a member of the control, meaning it can access additional control properties or model data.

```js
//"Input" required from module sap/m/Input

oTextField.bindProperty("value", "/company/title", function(sValue) {
return sValue && sValue.toUpperCase();
oTextField.bindProperty("value", {
path: "/company/title",
formatter: (sValue) => {
return sValue && sValue.toUpperCase();
}
});

oControl = new Input({
Expand All @@ -190,8 +188,11 @@ oControl = new Input({
Because it can contain any JavaScript, the formatter function can be used for formatting a value and also for performing type conversions or calculating results, for example, to show a special traffic light image depending on a Boolean value:

```js
oImage.bindProperty("src", "/company/trusted", function(bValue) {
return bValue ? "green.png" : "red.png";
oImage.bindProperty("src", {
path: "/company/trusted",
formatter: function(bValue) {
return bValue ? "green.png" : "red.png";
}
});
```

Expand Down Expand Up @@ -239,15 +240,12 @@ You can also provide parameter values for some of the simple types in your XML v
</mvc:View>
```

Using JavaScript, you can define a type to be used for a property binding by passing it as a third parameter in `bindProperty` or by adding it to the binding information by using the key `type`, as shown here:
Using JavaScript, you can define a type to be used for a property binding by adding it to the binding information by using the key `type`, as shown here:

```js
// "TypeString" required from module "sap/ui/model/type/String"
// "Input" required from module "sap/m/Input"
// "TypeFloat" required from module "sap/ui/model/type/Float"

oTextField.bindProperty("value", "/company/name", new sap.ui.model.type.String());

oControl = new sap.m.Input({
value: {
path:"/company/revenue",
Expand All @@ -274,7 +272,7 @@ You can define **custom types** by inheriting from `sap.ui.model.SimpleType` and
// "SimpleType" required from module "sap/ui/model/SimpleType"
// "ValidateException" required from module "sap/ui/model/ValidateException"

var Zipcode = SimpleType.extend("sap.ui.sample.Zipcode", {
const Zipcode = SimpleType.extend("sap.ui.sample.Zipcode", {
formatValue: function(oValue) {
return oValue;
},
Expand Down Expand Up @@ -316,22 +314,22 @@ By default, all bindings of a model instance have the default binding mode of th
// "JSONModel" required from module "sap/ui/model/json/JSONModel"
// "Input" required from module "sap/m/Input"
// "BindingMode" required from module "sap/ui/model/BindingMode"
var oModel = new JSONModel();
// default binding mode is two-way
oModel.setData(myData);
var oInputFirstName = new Input ();
oInputFirstName.setModel(oModel);

// bind value property one way only
// propertyname, formatter function, binding mode
oInputFirstName.bindValue("/firstName", null, BindingMode.OneWay);
oInputFirstName.placeAt("target1");

var oInputLastName = new Input();
oInputLastName.setModel(oModel);
// bind value property two way (default)
oInputLastName.bindValue("/lastName");
oInputLastName.placeAt("target2");
const oModel = new JSONModel();
// default binding mode is two-way
oModel.setData(myData);
const oInputFirstName = new Input ();
oInputFirstName.setModel(oModel);

// bind value property one way only
// propertyname, formatter function, binding mode
oInputFirstName.bindValue("/firstName", null, BindingMode.OneWay);
oInputFirstName.placeAt("target1");

const oInputLastName = new Input();
oInputLastName.setModel(oModel);
// bind value property two way (default)
oInputLastName.bindValue("/lastName");
oInputLastName.placeAt("target2");
```

In the example above, two `Input` fields are created and their `value` property is bound to the same property in the model. The first `Input` binding has a one-way binding mode, whereas the second `Input` has the default binding mode of the model instance, which is two-way. For this reason, when text is entered in the first `Input`, the value will **not** be changed in the model. This only happens if text is entered in the second `Input`. Then, of course, the value of the first `Input` will be updated as it has a one-way binding, that is, from model to view.
Expand Down
Loading