翻译自《Data Binding》
Fuse支持使用UX标签来创建数据驱动的应用,通过直接的绑定(binding
),迭代(iteration
)与分支(branching
)。UX也可以引用到复杂的数据结构。
JavaScript模块作为数据源
创建数据源最简单的方式是通过JavaScript,下面是一个最小的例子:
<App>
<JavaScript>
module.exports = {
greeting: "Hello world"
};
</JavaScript>
<Text Value="{greeting}" />
</App>
相似地,也可以绑定数组:
<App>
<JavaScript>
var data = ["1","2","3"];
module.exports = {
data: data
};
</JavaScript>
<StackPanel>
<Each Items="{data}">
<Text Value="{}" />
</Each>
</StackPanel>
</App>
上述代码会列出文本字符串1,2与3。将Text Value
与{}
代表数据上下文data context
。通常,你会绑定更复杂的数据源,每个元素都会绑定有趣的东西:
<App>
<JavaScript>
var Observable = require("FuseJS/Observable");
var data = Observable(
{name: "Hubert Cumberdale",age: 12},
{name: "Marjory Stewart-Baxter",age: 43},
{name: "Jeremy Fisher",age: 25});
module.exports = {
data: data
};
</JavaScript>
<StackPanel>
<Each Items="{data}">
<Text Value="{age}"/>
<Text Value="{name}"/>
</Each>
</StackPanel>
</App>
在这个例子中,让数据源是可观察的(Observable
)。即支持运行时传播数据源的变化。例子中,数组自身是可观察的,但是子项不可观察。如果为了让子项也可以将其变化传播给UI,你也要让子项可观察:
<JavaScript>
var Observable = require("FuseJS/Observable");
var data = Observable(
{ name: Observable("Hubert") },
{ name: Observable("Marjory") });
module.exports = {
data: data
};
</JavaScript>
<StackPanel>
<Each Items="{data}">
<Text Value="{name}" />
</Each>
</StackPanel>
也可以绑定一个路径:
<JavaScript>
var complex = {
user: {
userinfo: {
name: "Bob"
}
}
};
module.exports = {
complex: complex
};
</JavaScript>
<Text Value="{complex.user.userinfo.name}" />
当绑定任意数据资源,例如由REST服务返回的JSON数据,这是非常有用的,因为它允许你直接绑定复杂的数据,而不必使用代码处理。
绑定JavaScript函数:可以绑定事件处理器来调用JavaScript函数:
<App Theme="Basic">
<JavaScript>
module.exports = {
clickHandler: function (args) {
console.log("I was clicked: " + JSON.stringify(args));
}
};
</JavaScript>
<Button Clicked="{clickHandler}" Text="Click Me" Width="100" Height="20"/>
</App>
Each
用来重复UX标记项,对于数组中的每个元素。使用Each
时,通常会将Items
属性绑定到数组数据源上,那么对于数据源中的每个对象都会产生可视化节点。
<Each Items="{items}">
<Rectangle Width="{width}" Height="{height}" Fill="#808" />
</Each>
当然,也可以嵌套Each
:
<App Theme="Basic">
<JavaScript>
var Observable = require("FuseJS/Observable");
module.exports = {
items: [
{
inner: [{child: "John"},{child: "Paul"}]
},
{
inner: [{child: "Ringo"},{child: "George"}]
}
]
};
</JavaScript>
<ScrollViewer>
<StackPanel>
<Each Items="{items}">
<StackPanel Orientation="Horizontal">
<Each Items="{inner}">
<Text Value="{child}" Margin="10" />
</Each>
</StackPanel>
</Each>
</StackPanel>
</ScrollViewer>
</App>
WhileCount
与WhileEmpty
触发器可以使用于数组的元素数量。
<Each Items="{friends}">
<!-- ... List friend ... -->
</Each>
<WhileEmpty Items="{friends}">
<Text>No friends. :(</Text>
</WhileEmpty>
如果有复杂的数据上下文,想要缩窄数据上下文,可以使用Select
:
<JavaScript>
module.exports = {
complex: {
item1: {
subitem1: { name: "Spongebob", age: 32 }
}
}
};
</JavaScript>
<Select Data="{complex.item1.subitem1}">
<Text Value="{name}" />
<Text Value="{age}" />
</Select>