Question

有时在聚合绑定中，我需要向生成的项列表静态添加一些控件。有一些优雅的解决方案吗？

假设我有一个带有以下代码的Select：

<Select width="100%"
  items="{project>/Milestones}"
  selectedKey="0"
>
  <core:Item
    key="{project>Id}"
    text="{project>Name}"
  />
</Select>

绑定到具有以下数据的模型：

{
  Milestones: [
    {
      "Id": 1,
      "Name": "Cost Estimation 1",
      "Description": "Initial cost estimation"
    },
    {
      "Id": 2,
      "Name": "Pid Packages",
      "Description": "Ready for RFQs"
    },
    ...
  ]
}

我想使用key="0"和value="< Blank >"将一个项目添加到Select中，并且即使project>/Milestones的内容更改了，也要保留在那里，但是我不想添加到实际的汇总。

我目前拥有的解决方案似乎真的很糟糕，并在以后产生了问题：创建新模型（属性）会导致将数据复制到多个列表中，因此在某些时候它可能会不同步。我还尝试通过绑定事件添加静态项，但这有点容易出错，而且很冗长。

Answer 1

请按一下此处的摘要。首先，如果您只想添加“空白”项目，建议您使用ComboBox而不是Select，因为您始终可以删除选择。我也将其添加到代码段中。但是，如果要添加项目，则只需要使用here

中描述的addItem()函数

我还添加了一个按钮来修改您的模型，因此即使更改它，您也可以看到“ ”项如何保留在那里。

摘要

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <meta charset="utf-8">

  <title>MVC with XmlView</title>

  <!-- Load UI5, select "blue crystal" theme and the "sap.m" control library -->
  <script id='sap-ui-bootstrap' src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js' data-sap-ui-theme='sap_belize_plus' data-sap-ui-libs='sap.m' data-sap-ui-xx-bindingSyntax='complex'></script>


  <!-- DEFINE RE-USE COMPONENTS - NORMALLY DONE IN SEPARATE FILES -->

  <script id="view1" type="sapui5/xmlview">
    <mvc:View xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" controllerName="my.own.controller">
      <Title text="With Select" class="sapUiMediumMarginTop"></Title>
      <Select id="mySelect" width="100%" items="{ path: 'project>/Milestones', events:{ change: '.onSelectBindingChange' }, templateShareable: false}" selectedKey="0">
        <core:Item key="{project>Id}" text="{project>Name}" />
      </Select>
      <Title text="With ComboBox" class="sapUiMediumMarginTop"></Title>
      <ComboBox width="100%" items="{ path: 'project>/Milestones', templateShareable: false}" selectedKey="0">
        <core:Item key="{project>Id}" text="{project>Name}" />
      </ComboBox>
      <Button text="Modify Model" press="onButtonPressed" class="sapUiLargeMarginTop sapUiLargeMarginBottom"></Button>
    </mvc:View>
  </script>


  <script>
    // define a new (simple) Controller type
    sap.ui.controller("my.own.controller", {
      onSelectBindingChange: function(oEvent) {
        var oNewItem = new sap.ui.core.Item({
          key: 0,
          text: "< Blank >"
        });
        this.getView().byId("mySelect").addItem(oNewItem);
      },

      onButtonPressed: function(oEvent) {
        var aMilestones = this.getView().getModel("project").getProperty("/Milestones");
        aMilestones.push({
          Id: 4,
          Name: "New Milestone",
          Description: "Just a model modification"
        });
        this.getView().getModel("project").setProperty("/Milestones", aMilestones);
      }
    });



    /*** THIS IS THE "APPLICATION" CODE ***/
    // create some dummy JSON data
    var data = {
      Milestones: [{
          "Id": 1,
          "Name": "Cost Estimation 1",
          "Description": "Initial cost estimation",
        },
        {
          "Id": 2,
          "Name": "Pid Packages",
          "Description": "Ready for RFQs",
        },
        {
          "Id": 3,
          "Name": "Certificate Check",
          "Description": null,
        }
      ]
    };
    var oJSONModel = new sap.ui.model.json.JSONModel();
    oJSONModel.setData(data);

    // instantiate the View
    var myView = sap.ui.xmlview({
      viewContent: jQuery('#view1').html()
    }); // accessing the HTML inside the script tag above
    myView.setModel(oJSONModel, "project");
    // put the View onto the screen
    myView.placeAt('content');
  </script>

</head>

<body id='content' class='sapUiBody'>
</body>

</html>

如何向项目静态添加控件

1 个答案:

摘要