Question

我有一个带有多个sap.m.Input字段的“添加新…”屏幕。一切正常。我提交表单，并将值存储在数据库中。但是，一旦我重新打开“添加新…”屏幕，我就会获得带有先前输入值的表单。

当前，我可以解决使用sap.m.Input遍历所有sap.ui.core.Element字段并重置值的问题：

Element.registry.forEach(el => {
    if (el.isA("sap.m.Input") && el.sId.includes(inputFieldsMask)) {
        sap.ui.getCore().byId(el.sId).setValue("");
    }
});

inputFieldsMask是相关屏幕的所有输入字段的掩码。

据我了解，Element.registry.forEach遍历应用程序中的所有控件，因此，从性能的角度来看，我不确定这是清理字段的最佳方法。

我的问题：
有没有更好的方法可以从先前输入的值中重置输入字段？

Answer 1

最佳实践是使用模型来存储您的应用程序数据，并将任何输入字段绑定到该模型。我添加了一个示例here。为了简单起见，按下按钮时会清除模型数据。

在现实世界的应用程序中，您可以将模型的任何设置放入onRouteMatched处理程序中，以确保数据处于初始状态。

onRouteMatched : function(event) {
    this.getView().getModel().setData({
        "firstName": "",
        "lastName": ""
    });
}

Answer 2

有多种方法可以重置控制值，具体取决于您创建新条目所采用的方法。通常，我们可以使用以下API：

targetContainer.bindElement(sPathToNewItem)可以解析该容器中的相对绑定
<用户输入一些值并提交...>
targetContainer.unbindElement(sModelName)退出编辑视图后

通过取消绑定元素，相对绑定的控制值将自动重置。

示例（使用客户端模型）：

sap.ui.getCore().attachInit(() => sap.ui.require([
  "sap/ui/core/mvc/XMLView",
  "sap/ui/model/json/JSONModel",
  "sap/base/util/uid",
], (XMLView, JSONModel, createPseudoUniqueID) => XMLView.create({
  definition: `<mvc:View xmlns:mvc="sap.ui.core.mvc" height="100%">
    <App xmlns="sap.m">
      <Page backgroundDesign="List" title="Resetting inputs via Model and Context">
        <headerContent>
          <Button id="addBtn" text="Add Item" type="Emphasized" />
        </headerContent>
        <List id="myList" growing="true" items="{
          path: '/myItems',
          key: 'key',
          templateShareable: false
        }">
          <StandardListItem title="{value}" info="Key: {key}"/>
        </List>
      </Page>
      <dependents>
        <Dialog id="myDialog"
          icon="sap-icon://ui-notifications"
          title="New Item"
          draggable="true"
          class="sapUiResponsiveContentPadding"
        >
          <Input id="myInput"
            placeholder="&lt;New value>"
            valueLiveUpdate="true"
            value="{
              path: 'value',
              type: 'sap.ui.model.type.String',
              constraints: {
                minLength: 1
              }
            }"
          />
          <beginButton>
            <Button
              text="Submit"
              enabled="{= !!%{value} &amp;&amp; !%{messages>/}.length}"
            />
          </beginButton>
        </Dialog>
      </dependents>
    </App>
  </mvc:View>`,
  models: {
    undefined: new JSONModel({
      "myItems": [],
    }),
    "messages": sap.ui.getCore().getMessageManager().getMessageModel()
  },
  afterInit: function() {
    sap.ui.getCore().getMessageManager().registerObject(this, true);
    this.byId("addBtn").attachPress(handleAddPress.bind(this));
    this.byId("myInput").attachSubmit(handleSubmit.bind(this));
    this.byId("myDialog").setEscapeHandler(onESCPress.bind(this))
      .attachAfterClose(onAfterClose.bind(this))
      .getBeginButton().attachPress(handleSubmit.bind(this));
    
    function handleAddPress(event) {
      const dialog = this.byId("myDialog");
      const listBinding = this.byId("myList").getBinding("items");
      listBinding.suspend(); // Do not update the list yet
      this._currentItems = this.getModel().getProperty("/myItems"); // temp in case user cancels
      dialog.getModel().setProperty("/myItems", this._currentItems.concat({})); // new empty item
      dialog.bindElement("/myItems/" + listBinding.getLength()); // enable data synchronization via TwoWay binding
      dialog.open();
    }
    
    function onESCPress(promise) {
      const model = this.getModel();
      model.setProperty("/myItems", this._currentItems, /*context*/null, /*async*/true);
      return promise.resolve(); // continue closing dialog
    }
    
    function onAfterClose(event) {
      handleAfterClose(event.getSource(), this.byId("myList").getBinding("items"));
    }
    
    function handleAfterClose(dialog, listBinding) {
      dialog.unbindElement(); // reset data
      dialog.setBusy(false);
      listBinding.resume();
    }
    
    function handleSubmit() {
      const dialog = this.byId("myDialog");
      if (!dialog.getBeginButton().getEnabled()) return; // something is wrong
      dialog.setBusy(true);
      if (!this._isStillRequesting) {
        this._isStillRequesting = true;
        /* send request */setTimeout(mySuccessHandler.bind(this), 3000)
      };
    }
    
    function mySuccessHandler(newKeyFromServer = createPseudoUniqueID()) {
      const dialog = this.byId("myDialog");
      this._isStillRequesting = false;
      if (!dialog.isOpen()/* request was aborted e.g. by pressing ESC */) {
        return; // exit early
      }
      const context = dialog.getBindingContext();
      const value = context.getProperty("value");
      dialog.getModel().setProperty(context.getPath("key"), newKeyFromServer);
      dialog.close();
      sap.ui.require([
        "sap/m/MessageToast"
      ], MT => window.requestAnimationFrame(() => MT.show(`${value} created`)));
    }

  },
}).then(view => view.placeAt("content"))));

<script id="sap-ui-bootstrap" src="https://ui5.sap.com/resources/sap-ui-core.js"
  data-sap-ui-libs="sap.ui.core, sap.m"
  data-sap-ui-theme="sap_fiori_3"
  data-sap-ui-async="true"
  data-sap-ui-compatversion="edge"
  data-sap-ui-xx-waitForTheme="init"
></script>
<body id="content" class="sapUiBody sapUiSizeCompact"></body>

绑定和取消绑定元素也适用于服务器端模型，例如ODataModel。

好处

✅减少的过载：无需遍历所有现有控件。仅自动重置那些需要重置的东西。
✅与控制无关的：不依赖于特定于控制的API，例如myInput.setValue，mySwitch.setState等。
✅降低了维护成本：无需维护控制器中需要手动重置的模型属性列表。

Answer 3

将所有控制值绑定到模型。成功保存数据后，请重置此模型。

示例：

control1.bindProperty("value", "/controlValues/control1Value"); // Binding
// control1.bindProperty("value", "/controlValues/name");
// <Input value="{/controlValues/name}" /> // <-- ideal binding in xml view

this.getView().getModel().setProperty("/controlValues", this.resetFormData()); // Clear Model

resetFormData: function () {
    var emptyControlValues = {
        "control1Value": "", // "name": "", <-- bind to control
        "control2Value": 0,  // "age": 0,
        "control3Value": "", // "address": "",
        "control4Value": ""  // "tel": ""
    };
    return emptyControlValues;
};

重置所有屏幕的控制值

3 个答案:

示例（使用客户端模型）：

好处