Fuse学习<2>

翻译自《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>