docs

Step 5: One-Way Data Binding

Unlike the two-way binding behavior we’ve seen, one-way data binding is also possible. In this case, data travels in one direction only: from the model, through the binding instance, to the consumer (usually the property of a control), but never in the other direction. Let’s modify the previous example to use one-way data binding. This shows how you can switch off the flow of data from the user interface back to the model if needed.


Preview

Two input fields and a checkbox

The graphic has an explanatory text


Coding

You can view and download all files in the Demo Kit at Data Binding - Step 5.


webapp/Component.js

Insert the highlighted code into the Component.js file. The init function calls the init function of its parent, retrieves the default model instance bound to the component, and sets the default binding mode to one-way data binding.

sap.ui.define([
	"sap/ui/core/UIComponent",
	"sap/ui/model/BindingMode"
], (UIComponent, BindingMode) => {
	"use strict";

	return UIComponent.extend("ui5.databinding.Component", {
		metadata : {
			interfaces: ["sap.ui.core.IAsyncContentCreation"],
			manifest: "json"
		},

		init() {
			// call the init function of the parent
			UIComponent.prototype.init.apply(this, arguments);

			this.getModel().setDefaultBindingMode(BindingMode.OneWay);
		}
	});
});

Now, regardless of the state the checkbox is in, the input fields remain open for input, because one-way data binding ensures that data flows only from the model to the UI, but never in the other direction.

The binding mode (one-way or two-way) is set on the model itself. Therefore, unless you specifically alter it, a binding instance will always be created using the model’s default binding mode.

If you wish to alter the binding mode, you’ve got two options:

Note:

There are two important points to understand about alterations to a model object’s data binding mode:

Parent topic:Data Binding Tutorial

Next:Step 4: Two-Way Data Binding

Previous:Step 6: Resource Models