This article describes the form of data binding in the template pattern.
Single data source binding
Following the Vue format, template mode supports both interpolation and directive for single data binding.
Interpolation formats can be used only separately, and cannot be mixed, such as <text>ab{{var1}}cd</text>.
Directive support abbreviated formats.
When used, the data field that can be bound (that is, the name in the following table) is determined by the current component, and the bound data variable (that is, variable in the following table) can be defined by using 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> |
The supported formats for text-based components (such as `text`) when populating content include:
[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 that the hello_3 will eventually be displayed.
Double data source binding
The template supports submitting two sets of data as data sources to be bound simultaneously. This mainly solves the problem of injecting additional control data into the template from the native side during actual business development. When such a requirement is encountered, this function is enabled.
The data injected from the template will be merged with the mock data sent by the server. The injected data has higher priority, and if there are identical fields, it will overwrite the corresponding fields in the mock data. The usage is the same as that of the fields in the mock data.
// The injected data.
{
title: "title"
}
// The data extraction method.
<text :value=title></text>Example code
Click here detailBindData.zip for the complete sample code.