javascript - SAPUI5可重用表片段数据绑定(bind)

Question

我开始开发 SAPUI5，尝试应用迄今为止我所知道的其他 Web 开发工具包中的概念和最佳实践，请友善，因为我的知识仍然相当有限。

我想重新构建一个项目，并用可重用的部分替换复制粘贴代码。据我检查，自定义控件不是正确的方法，基本上它是具有不同数据绑定(bind)的 SAPUI5 控件的纯粹标准功能。 数据绑定(bind)和传播应该通过 XML 完成，因为它最适合项目架构，我最初的想法是使用片段。

示例: 相同的表应该在同一 View 和不同 View 、具有不同对象数组的单个模型中多次使用。

片段:

    <Table items="{???}">
        <columns>
            <Column >
                <Text text="Name"/>
            </Column>
            <Column>
                <Text text="Amount"/>
            </Column>
        </columns>
        <items>
            <ColumnListItem>
                <cells>
                    <ObjectIdentifier title="{dataModel>name}"/>
                    <Text text="{dataModel>amount}"/>
                </cells>
            </ColumnListItem>
        </items>
    </Table>
</core:FragmentDefinition>

型号:

let oTemp = new JSONModel({
    data: {
        a: [{
            name: "Product 1 Entry 1",
            amount: "Product 1 Amount 1"
        }, {
            name: "Product 1 Entry 2",
            amount: "Product 1 Amount 2"
        }],
        b: [{
            name: "Product 2 Entry 1",
            amount: "Product 2 Amount 1"
        }, {
            name: "Product 2 Entry 2",
            amount: "Product 2 Amount 2"
        }]
    }
});
this.getView().setModel(oTemp, "dataModel");

XML View 用法:

<core:Fragment objectBindings="dataModel>/data/a" type="XML" fragmentName="...view.ReusableTable"></core:Fragment>
<core:Fragment objectBindings="dataModel>/data/b" type="XML" fragmentName="...view.ReusableTable"></core:Fragment>

我尝试了各种方法来绑定(bind)表或片段本身中的项目聚合，但没有成功。 如本示例所示，我希望将特定的模型属性传递给片段及其表，以显示一组不同的项目(a 或 b)，而无需在 View Controller 中使用 javascript。

期望的输出:

2 个表，相同的标题(名称、金额列)，每行 2 行，使用数据模型、属性 a [] 和 b [] 中的数据

从我在 SAPUI5 库中看到的有关代码重用的内容来看，片段应该是实现此结果的最佳方式，因为不需要额外的 Controller 逻辑来显示 |相互影响。我将不胜感激任何如何解决这个问题的建议，或者如果有必要的话可以改变一般的方法？非常感谢!

Answer 1

事实证明，事情并没有那么复杂。

https://plnkr.co/edit/ssWEKqICoY5il5o3

片段(以及基本上所有其他属于 ManagedObject 的控件)都有一个属性绑定(bind)。将其设置为您的片段:

<core:Fragment binding="{dataModel>/data/a}" fragmentName="ui.Table" type="XML" />
<core:Fragment binding="{dataModel>/data/b}" fragmentName="ui.Table" type="XML" />

要在片段中重用此绑定(bind)，只需相对于当前上下文(基本上根本没有路径)指向

<Table items="{dataModel>}">

如果您的 JSONModel 没有名称，您只需编写 items="{}" 即可获得相同的结果。