如何将值从XML视图传递给控制器​​？

时间：2014-11-26 11:46:39

标签： javascript sapui5

我正在使用openUI5中的mvc练习数据绑定。我有一个XML视图，其中包含一个从JSON模型填充的表，每行的文本字段旁边都有一个按钮。我想在文本字段中输入一个新位置，按下它旁边的按钮并更新位置列单元格，以演示绑定。

ID    Name       Age   Position     Update Position
101   Brian Cox  23    Developer    [text area for new position]   [update button]

XML视图：

<mvc:View
  controllerName="view.App"
  xmlns:mvc="sap.ui.core.mvc"
  xmlns:l="sap.ui.layout"
  xmlns="sap.m">
  <Table items="{/employee}">
<columns>
  <Column>
    <Text text="ID" />
  </Column>
  <Column>
    <Text text="Name" />
  </Column>
  <Column>
    <Text text="Age" />
  </Column>
  <Column>
    <Text text="Position" />
  </Column>
  <Column>
    <Text text="Update Position" />
  </Column>
  <Column>
  </Column>
</columns>

<items>
  <ColumnListItem>
    <cells>
      <Text text="{id}" />
      <Text text="{Name}" />
      <Text text="{Age}" />
      <Text text="{Position}"/>
      <TextArea />
      <Button text="Update" press="posUpdate"/>
    </cells>
  </ColumnListItem>
</items>

</Table>
</mvc:View>

在我的控制器中，我有一个附加到按钮的功能来更新员工的JSONModel。

sap.ui.controller("view.App", {

onInit: function(){
    oModel = new sap.ui.model.json.JSONModel("employee.json");
    oModel.setDefaultBindingMode(sap.ui.model.BindingMode.OneWay);
    this.getView().setModel(oModel);
    sap.ui.getCore().setModel(oModel);
},

posUpdate: function(){
    //trying to fetch the value of the textarea in the view
    var data = sap.ui.getCore().byId("newPos").getValue();
    sap.ui.getCore().getModel('oModel').getProperty("Position");
    oModel.setData({Position: data}, true);
}
});

JSON：

{
"employee": [
    {
        "id": 101,
        "Name": "Brian Cox",
        "Age": "23",
        "Position": "Developer"
    },
    {
        "id": 102,
        "Name": "Richard Feynman",
        "Age": "66",
        "Position": "HR Clerk"
    },
    {
        "id": 103,
        "Name": "Tycho Brahe",
        "Age": "65",
        "Position": "Developer"
    },
    {
        "id": 104,
        "Name": "Albert Einstein",
        "Age": "32",
        "Position": "Consultant"
    }
 ]
}

的index.html：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
<title>UI5 MVC with XmlView</title>
<script id='sap-ui-bootstrap' type='text/javascript'
    src='../resources/sap-ui-core.js'
    data-sap-ui-theme='sap_bluecrystal'
    data-sap-ui-libs='sap.m, sap.ui.table'></script>

<script>
    sap.ui.localResources("view");

    var view = new sap.ui.xmlview("App", "view.App").placeAt("content");

</script>
</head>
<body class="sapUiBody">
    <div id="content"></div>
</body>
</html>

在控制器posUpdate函数中，我想检索文本字段的值，并将模型中的位置值更改为此值。如何为特定的JSON对象执行此操作？我觉得我需要以某种方式更改JSON文件以适应这种情况。

我是UI5的新手，也欢迎任何有关我的代码结构和实践的有用评论。

提前谢谢。

2 个答案:

答案 0 :(得分：3)

要展示绑定，您需要做的就是：

取代：

  <TextArea />

带

<TextArea value="{Position}"/>

完全删除“更新”按钮。

直接DOM或SAP对象操作来获取值无视双向绑定框架的整个目的!!!

艾伦，7行代码做绑定???请告诉我你在开玩笑。

答案 1 :(得分：1)

1.要从每个表格行获取TextArea，您需要先获取表格Button的父表格。

2.要获取当前Row的绑定路径，可以调用Button的getBindingContext()来获取路径。

3.由于默认绑定模式为TwoWay，您只需要调用setProperty，数据将自动刷新。

请阅读以下功能的评论，我还插入了一个有效的代码片段。请 运行它以查看结果。如有任何其他问题，请发表评论。

posUpdate: function(oEvent) {
    //get the event source which is the button
    var oButton = oEvent.getSource();
    //get the parent of the button which is row
    var oRow = oButton.getParent();
    //get the textarea which is the fourth of the cells of row
    var oTextArea = oRow.getCells()[4];
    //get the value of the new position
    var sNewPosition = oTextArea.getValue();

    //get the model 
    var oModel = oButton.getModel();
    //get the binding path of current row
    var oPath = oButton.getBindingContext().sPath;
    //set the Postion to the new Position
    oModel.setProperty(oPath + "/Position", sNewPosition);  
}


<script id='sap-ui-bootstrap' type='text/javascript' src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js' data-sap-ui-libs="sap.m,sap.ui.commons,sap.ui.table,sap.viz" data-sap-ui-theme="sap_bluecrystal"></script>

  <script id="view1" type="sapui5/xmlview">
      <mvc:View
        controllerName="view.App"
        xmlns:mvc="sap.ui.core.mvc"
        xmlns:l="sap.ui.layout"
        xmlns="sap.m">
        <Table items="{/employee}">
      <columns>
        <Column>
          <Text text="ID" />
        </Column>
        <Column>
          <Text text="Name" />
        </Column>
        <Column>
          <Text text="Age" />
        </Column>
        <Column>
          <Text text="Position" />
        </Column>
        <Column>
          <Text text="Update Position" />
        </Column>
        <Column>
        </Column>
      </columns>

      <items>
        <ColumnListItem>
          <cells>
            <Text text="{id}" />
            <Text text="{Name}" />
            <Text text="{Age}" />
            <Text text="{Position}"/>
            <TextArea />
            <Button text="Update" press="posUpdate"/>
          </cells>
        </ColumnListItem>
      </items>

      </Table>
      </mvc:View>
</script>
  
  
  <script>
    sap.ui.controller("view.App", {

onInit: function(){
    var data = {
"employee": [
    {
        "id": 101,
        "Name": "Brian Cox",
        "Age": "23",
        "Position": "Developer"
    },
    {
        "id": 102,
        "Name": "Richard Feynman",
        "Age": "66",
        "Position": "HR Clerk"
    },
    {
        "id": 103,
        "Name": "Tycho Brahe",
        "Age": "65",
        "Position": "Developer"
    },
    {
        "id": 104,
        "Name": "Albert Einstein",
        "Age": "32",
        "Position": "Consultant"
    }
 ]
};
    var oModel = new sap.ui.model.json.JSONModel(data);
    oModel.setDefaultBindingMode(sap.ui.model.BindingMode.OneWay);
    this.getView().setModel(oModel);
    sap.ui.getCore().setModel(oModel);
},

posUpdate: function(oEvent){
    //get the event source which is the button
    var oButton = oEvent.getSource();
    //get the parent of the button which is row
    var oRow = oButton.getParent();
    //get the textarea which is the fourth of the cells of row
    var oTextArea = oRow.getCells()[4];
    //get the value of the new position
    var sNewPosition = oTextArea.getValue();
    
    //get the model 
    var oModel = oButton.getModel();
    //get the binding path of current row
    var oPath = oButton.getBindingContext().sPath;
    //set the Postion to the new Position
    oModel.setProperty(oPath+"/Position",sNewPosition);
     
}
});
    var myView = sap.ui.xmlview("myView", {
        viewContent: jQuery('#view1').html()
    }); // 
    myView.placeAt('content');
</script>

<body class='sapUiBody'>
    <div id='content'></div>
</body>

相关问题
最新问题