时间戳

首页 > 解决方案 > 使用一个功能设置组件的多个属性

sapui5 - 使用一个功能设置组件的多个属性

问题描述

我在 sapui5 XML 视图的列表中有一个组件，我想用一个函数设置该组件的多个属性。例如，我想将 ObjectStatus 的 、 和 设置text在一起，status因为它们的值都是相同数据的不同方面。问题是我必须使用相同的相对耗时的函数计算要从模型中设置为这些属性的值。如果我为每个属性编写一个单独的格式化程序，它必须为每个属性运行相同的函数。而不是这个，我想编写一个函数来运行这个耗时的函数一次，并同时为所有这些属性设置一个值。tooltipicon

为此，我尝试创建一个 sapui5 片段，该片段可以放置在列表中，并由 createContent 函数为该片段的每个实例填充不同的信息。但是我无法弄清楚如何做到这一点。

在视图定义中，我尝试像这样实例化片段：

<core:Fragment fragmentName="QuantificationParameter" type="JS" path="{project>}"/>

然后我尝试为片段的每个实例设置不同的内容：

sap.ui.jsfragment("namespace.fragments.QuantificationParameter", { 
    createContent: function(oParentController) {
        //Get the object bound to this list item
        var derived; //Calculate some intermediate information from this object
        return new sap.m.ObjectStatus({
            icon: derived.icon,
            text: derived.text,
            state: derived.state,
            tooltip: derived.tooltip
        });
    }
});

在调试时，片段的 createContent 函数似乎只运行一次，我无法找出任何方法来访问我试图绑定到片段的数据。有什么方法可以为片段的每个实例呈现不同的内容吗？

标签： sapui5

解决方案

您正在搜索的内容称为数据绑定。

但首先：我们不使用 JS Fragments，出于同样的原因，我们不使用 JS 视图。这里有一个关于该主题的小博客。 https://blogs.sap.com/2018/05/01/why-do-we-use-xml-views-rather-js-views-in-sapui5/

现在是数据绑定部分：

我假设，片段对于每个实例都将具有相同的控件，而您只希望更改值。为此，您需要在 BaseController 或 component.js 中创建 JSONModel。在这个模型中，您存储即您的标签文本。在您的 Fragmet 中，您将该属性绑定到标签。由于默认情况下 JSONModels 绑定模式是两种方式，因此如果您更新模型，标签将动态更改。您可以更新模型，即每次用户单击您的列表项之一。

框架示例：

<core:FragmentDefinition
    xmlns="sap.m"
    xmlns:f="sap.ui.layout.form"
    xmlns:core="sap.ui.core">

            <f:SimpleForm
                editable="true">
                <f:content>
                    <Input
                        value="{baseModel>/inputA}"
                        type="Text"
                        placeholder="{i18n>placeHolder}"/>
                    <TextArea
                        value="{baseModel>/textA}"/>
                    <TextArea
                        editable="false"
                        value="{baseModel>/textB}"/>
                </f:content>
            </f:SimpleForm>

</core:FragmentDefinition>

在component.js中创建模型即：

var oBaseModel = new JSONModel({
        inputA: "",
        textA: "",
        textB: ""
});
this.setModel(oBaseModel, "baseModel");

您的新闻照明项目功能示例：（应该在您的列表所在的视图的控制器中）

onListPress: function (oEvent) {
    var oLine = oEvent.getSource().getBindingContext("yourRemoteService").getObject();
    this._oBaseModel.setProperty("/inputA", oLine.ListPropertyA);
    this._oBaseModel.setProperty("/textA", oLine.ListPropertyb);
    this._oBaseModel.setProperty("/textB", oLine.ListPropertyC);
}

你真的应该试试那个教程： https ://sapui5.hana.ondemand.com/#/topic/e5310932a71f42daa41f3a6143efca9c

推荐阅读