SAPUI5 可重用表片段数据绑定答案

【问题标题】：SAPUI5 Reusable Table Fragment Data BindingSAPUI5 可重用表片段数据绑定
【发布时间】：2022-08-04 14:18:47
【问题描述】：

我开始开发 SAPUI5，尝试应用我目前知道的其他 Web 开发工具包的概念和最佳实践，请善待我的知识仍然相当有限。

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

样本：同一个表应该在同一个视图和不同的视图中多次使用，具有不同对象数组的单个模型。

分段：

    <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 视图用法：

<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>

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

期望的输出：

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

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

标签： javascript xml sapui5

【解决方案1】：

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

https://plnkr.co/edit/ssWEKqICoY5il5o3

片段（以及基本上是ManagedObject 的所有其他控件）具有属性binding。将此设置为您的片段：

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

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

<Table items="{dataModel>}">

如果您的 JSONModel 没有名称，您可以直接写 items="{}" 以获得相同的结果。

【讨论】：

没有你我早就放弃了，谢谢你回来，我需要的英雄！奇迹般有效：）

【解决方案2】：

对于 XML：

<core:Fragment fragmentName="fragmentlocation.fragmentName" type="XML"/>

控制器绑定：

if (!this._DialogFragment) {
    Fragment.load({
    id: oView.getId(),
    name: "fragmentlocation.name",
    controller: this
  }).then((oDialog) => {
    this._DialogFragment = oDialog;
    oView.addDependent(this._DialogFragment );
    this._DialogFragment.open();
  });
} else {
  this._DialogFragment.open();
}

【讨论】：

也许我错过了重点，但您的回答似乎没有解决这个问题。如前所述，我想避免控制器逻辑，我很清楚我可以使用 JS、模板和/或 .bind 函数来实现所需的结果。此外，您的示例使用了一个单独的弹出对话框，这也与我正在寻找的结果不同。