Question

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

为此，我尝试创建一个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函数仅运行一次，并且我无法找出任何方法来访问我试图绑定到该片段的数据。有什么方法可以为片段的每个实例渲染不同的内容？

Answer 1

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

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

现在是数据绑定部分：

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

Framgmet示例：

<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

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

1 个答案: