文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何将XML视图的值传递给控制器？

问如何将XML视图的值传递给控制器？
EN

Stack Overflow用户
提问于 2014-11-26 11:46:38
回答 2查看 8.2K关注 0票数 3

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

代码语言：javascript
复制
ID    Name       Age   Position     Update Position
101   Brian Cox  23    Developer    [text area for new position]   [update button]

XML视图：

代码语言：javascript
复制
<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。

代码语言：javascript
复制
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);
}
});

杰森：

代码语言：javascript
复制
{
"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：

代码语言：javascript
复制
<!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新手，也欢迎对我的代码结构和实践有帮助的评论。

提前谢谢你。

javascript
sapui5
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2014-11-26 14:16:45

1.要从每个表行获取TextArea，首先需要获得表行，该表行是Button的父级。

2.要获得当前行的绑定路径，可以调用按钮的getBindingContext()来获取路径。

3.由于默认的绑定模式是TwoWay，所以只需调用setProperty，数据就会自动刷新。

请阅读以下函数的注释，我还插入了一个工作代码片段。请运行它看看results.In的案例，任何进一步的问题，请留下评论。

代码语言：javascript
复制
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);  
}

​

代码语言：javascript
复制
<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>

​

票数 1
EN

Stack Overflow用户

发布于 2014-11-28 18:34:30

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

取代：

代码语言：javascript
复制
  <TextArea />

使用

代码语言：javascript
复制
<TextArea value="{Position}"/>

并完全删除“更新”按钮。

直接操作DOM或SAP对象以获得值，这违背了双向绑定框架的全部目的！

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

票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/27148363

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档