SAPUI5：如何使用 OData Model 將 Arrays 或對象綁定到 UI 元素？

Question

我想將 SAPUI5 中的 ProcessFlowLaneHeader 綁定到 SAPUI5 中的 OData Model。 文本和 position 綁定沒有問題。

我的問題是我不知道如何將屬性 state 正確綁定到單個 OData 屬性。 state 屬性不包括數組或 Object，但我想在我的 OData Model 中為 state 和值不同的屬性。

這是您在 Controller 中手動設置具有固定值的數組時的方式

                new sap.suite.ui.commons.ProcessFlowLaneHeader({
                    text: "{ProcessFlowModel>label}",
                    position: "{ProcessFlowModel>position}",
                    state: [ {
                            "state": "Positive",
                            "value": 100                
                        }
                    ]
                })

但我想將 state 和屬性 state 的值綁定到 ODataModel，但它不起作用。 我的語法是錯誤的還是這可能？

                new sap.suite.ui.commons.ProcessFlowLaneHeader({
                    text: "{ProcessFlowModel>label}",
                    position: "{ProcessFlowModel>position}",
                    state: [ {
                            "state": "'{ProcessFlowModel>state}'",
                            "value": '{ProcessFlowModel>value}'             
                        }
                    ]
                })

我知道我可以在修改我的 OData 服務后使用多級擴展實體集來做到這一點，因為 SAPUI5 需要嵌套或擴展實體集，但我想用單個屬性解決它：

我的 OData output 看起來像

"state": "Positive",
"value": "50"

不是這樣的，據我所知這沒問題

        "state": [
            {
                "state": "Positive",
                "value": 25
            }

所以我的問題也是，如何在不使用多級擴展實體集的情況下在 SAPUI5 中綁定對象或 arrays？

Answer 1

我從未使用過該控件，但我的回答太長而無法發表評論。 根據我對 UI5 的了解，我希望您可以執行以下操作：

創建一個格式化程序，它以控件期望的格式返回 object。

formatProcessFlowLaneHeaderState: function(state, value) {
    return {
        state,
        value
    };
}

然后在你的綁定中使用它

state: "{ parts: ['ProcessFlowModel>state', 'ProcessFlowModel>value'], formatter: '.formatProcessFlowLaneHeaderState' }"

如果您想了解格式化程序的語法，它使用的是簡寫屬性名稱。

此外，如果我正確理解文檔，您甚至不需要創建 object，但可以返回具有兩個值的數組。 然后你甚至不需要格式化程序，但可以使用表達式綁定：

state: "{= [${ProcessFlowModel>state}, ${ProcessFlowModel>value}] }"

Answer 2

我的應用程序沒有找到我的格式化程序方法，所以我把它放在綁定中：

                new sap.suite.ui.commons.ProcessFlowLaneHeader({
                    text: "{ProcessFlowModel>label}",
                    position: "{ProcessFlowModel>position}",
                    state: {
                        parts: ['ProcessFlowModel>state', 'ProcessFlowModel>value'],
                        formatter: function (state, value) {
                            return [{ 
                                state: state,
                                value: value
                            }];
                        }
                    }
                })