Data binding

Single data source binding

Template mode supports both interpolation and directives for single data binding.

• Interpolation formats can only be used independently and cannot be mixed with static text, such as <text>ab{{var1}}cd</text>.

• Directives support abbreviated formats.

The bindable data field (name in the following table) is determined by the current component. The bound data variable (variable in the following table) supports expressions.

Type	Data structure	Short form	Cascade	Examples
Interpolation	{{variable}}	None	. or []	<text>{{var1.var2}}</text>
Directive	v-bind:name="variable"	:name="variable"	. or []	<text :value="var1[num1]"></text>

Text-based components (such as text) support the following formats for populating content:

• [1] <text:value="var"></text> (where var="hello_1")

• [2] <text>{{var}}</text> (where var="hello_2")

• [3] <text>hello_3</text>

The resolution priority is [1] < [2] < [3], which means hello_3 is displayed.

Double data source binding

You can submit two sets of data as data sources to bind simultaneously. This allows you to inject additional control data into the template from the native side during business development.

The injected data is merged with the mock data from the server. Injected data takes higher priority and overwrites identical fields in the mock data. The usage is the same as regular mock data fields.

// The injected data.
{
title: "title"
}

// The data extraction method.
<text :value=title></text>

Example code

Download detailBindData.zip for the complete sample code.