Question

SAPUI5中有一个组件，我需要在其中监听绑定（Binding.change event）中的更改。目前，我正在像这样在modelContextChange中向Binding添加一个侦听器：

function onModelContextChange(oEvent){
   var oSelect = oEvent.getSource();
   var binding = oSelect.getBinding("items");
   if(binding){
      binding.attachChange(onDataChange, oSelect);
   }
}

但是，这会引起各种奇怪的问题，因为modelContextChange可能会被多次触发。最好在XML视图中做到这一点。我已经尝试过这样的代码，但是它不起作用。

<Select items="{ path: 'project>/data/', change:'onDataChange' templateShareable: false">
   <core:Item key="{project>Id}" text="{project>Parameter}"/>
</Select>

任何建议如何做到这一点？

Answer 1

如果我从JS视图中还记得的话，我认为是这样的：

<Select items="{ path: 'project>/data/', events: {change:'onDataChange'}, templateShareable: false}">

这是用来监听Model“更改”事件的。

如果您想在Select控件中收听“ change”事件，则这是用户在下拉菜单中选择其他值时的情况，就像这样：

<Select items="{ path: 'project>/data/', templateShareable: false}" change="onDataChange">

编辑：使用“ modelContextChange”事件。

<Select items="{ path: 'project>/data/', templateShareable: false}" modelContextChange="onDataChange">

Answer 2

我也碰到了这个问题。我以这种方式解决了：

<Select items="{
  path: 'project>/data',
  events: {
    change: '.onDataChange'
  },
  templateShareable: false
}">

您可以将events对象传递给绑定并使用可用的绑定（例如v2.ODataListBinding）。请注意，您必须在函数名称（.onDataChange）之前使用点。在您的控制器中，您可以添加以下功能：

onDataChange: function(oEvent) {
  // Your implementation...
},

Answer 3

这是一个例子

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>JS Bin</title>
    <script 
            src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" 
            id="sap-ui-bootstrap" 
            data-sap-ui-theme="sap_bluecrystal" 
            data-sap-ui-xx-bindingSyntax="complex" 
            data-sap-ui-libs="sap.m"></script>
    <style type="text/css">
      .sapMObjLTitle {
        cursor: pointer;
      }
    </style>

    <!-- XML-based view definition -->
    <script id="oView" type="sapui5/xmlview">
    <mvc:View height="100%" controllerName="myView.Template"
      xmlns="sap.m"
      xmlns:core="sap.ui.core"
      xmlns:mvc="sap.ui.core.mvc">
      <Select change="onDataChange" items="{ path: 'project>/data', templateShareable: false}">
        <core:Item key="{project>Id}" text="{project>Parameter}"/>
      </Select>
    </mvc:View>
    </script>

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


sap.ui.define([
  'jquery.sap.global',
  'sap/ui/core/mvc/Controller',
  'sap/ui/model/json/JSONModel'
], function(jQuery, Controller, JSONModel) {

  var ListController = Controller.extend("myView.Template", {
    onInit: function(oEvent) {
      var oView = this.getView();
      oView.setModel(new JSONModel({
        data: [{
          Id: "1",
          Parameter: "One" 
        }, {
          Id: "2",
          Parameter: "Two" 
        }]
      }), "project");
    },
    onDataChange: function() {
      alert("changed")
    }
  });

  return ListController;
});

// Instantiate the View and display
var oView = sap.ui.xmlview({
  viewContent: jQuery('#oView').html()
});

oView.placeAt('content');

https://jsbin.com/zufurav/edit?html,js,output

注意：您XML中的change属性不正确

Answer 4

我设法通过将modelContextChange附加到元素并处理将change事件附加到其中的绑定，而将this设置为所需的元素，从而获得了绑定改变事件。这是来自视图控制器的代码：

modelContextChange: function(oEvent) {
  var oElement = oEvent.getSource();
  var binding = oElement.getBinding("items");
  if (binding) {
    //Binding change event could already be attached, detach it first, if it's there
    binding.detachChange(this.onBindingChange, oSelect);
    binding.attachChange(this.onBindingChange, oSelect);
    // Beacause I used this inside a sap.ui.table.Treetable,
    // in some cases binding changes occur without the binding change event firing.
    // Manually fire the binding change just in case
    // YMMV
    binding.refresh(true);
  }
},
onBindingChange: function() {
  //The code that needs to run at binding change
  //"this" is set to the correct element 
  //I specifically needed to add one element in front of other items in a sap.m.Select
  var items = this.removeAllItems();
  this.addItem(new sap.ui.core.Item({
    key: 0,
    text: "< Inherit >"
  }));
  items.forEach(function(item) {
    this.addItem(item);
  }, this);
}

是否可以在XML视图中向组件添加Binding change事件？

4 个答案: