使用数据绑定从SAPUI5多输入字段中删除令牌

Posted 2021-05-06

在我的SAPUI5应用程序中，我使用带有令牌的多输入字段，这些令牌绑定到JSON模型。新添加的条目保存在JSON模型中。但是，当通过按下令牌文本旁边的“x”删除令牌时，令牌将从多输入字段中消失。但是在添加新令牌时，已删除的令牌会重新出现。如何确保已从JSON模型中删除已删除的条目？

这是我目前用于将令牌添加到模型的代码：

multiInputField.addValidator(function(args){
                MessageBox.confirm("Do you really want to add Token"" + args.text + ""?", {
                    onClose: function(oAction) {
                        if (oAction === MessageBox.Action.OK){
                            var oToken = new Token({key: args.text, text: args.text});
                            args.asyncCallback(oToken);
                            var aFields = sap.ui.getCore().getView().getModel("myModel").getProperty("/Tokens");
                            var oNewFields= {
                                Tokens: args.text
                            };
                            aFields .push(oNewFields);
                            sap.ui.getCore().getView().getModel("myModel").setProperty("/Tokens", aFields );
                            sap.ui.getCore().getView().getModel("myModel").refresh();
                        } else {
                            args.asyncCallback(null);
                        }
                    },
                    title: "Add Token"
                    });
                  return sap.m.MultiInput.WaitForAsyncValidation;
            });

答案

我想我们可以为此使用“tokenUpdate”事件。

例如，假设我在我的视图中有这个MultiInput：

    <MultiInput width="500px" id="multiInput" suggestionItems="{ path: 'dataModel>/data'}" showValueHelp="true" tokenUpdate="onTokenUpdate">
                    <core:Item key="{dataModel>key}" text="{dataModel>value}"/>
                </MultiInput>

然后在我的控制器中，我可以像这样处理：

onTokenUpdate: function(oEvent) {
        var sType = oEvent.getParameter("type");
        if (sType === "removed") {
            var sKey = oEvent.getParameter("removedTokens")[0].getProperty("key");
            var oModel = this.getView().getModel("dataModel");
            var aData = this.getView().getModel("dataModel").getProperty("/data");
            for (var i = 0, len = aData.length; i < len; i++) {
                var idx;
                console.log(sKey + "-" + aData[i].key);
                if (aData[i].key === sKey) {
                    idx = i;
                }
            }
            aData.splice(idx, 1);
            oModel.setProperty("/data", aData);
            console.log(oModel);
        }
    }

这是我的json：

{
"data": [
    {
        "key": "token1",
        "value": "token1"
    },
    {
        "key": "token2",
        "value": "token2"
    }
]

}