XMLFragment

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	<meta charset="UTF-8">
	<title>SAPUI5 Walkthrough</title>
	<script
		id="sap-ui-bootstrap"
		src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js'
		data-sap-ui-theme="sap_bluecrystal"
    data-sap-ui-libs="sap.m"
    data-sap-ui-xx-bindingSyntax="complex"
		data-sap-ui-resourceroots='{
				"sap.ui.demo.wt": "./"
			}'>
	</script>
	<script>
				new sap.m.Shell("ShellId",{title: "Fragment Demo",
					showLogout: false,
					app: new sap.ui.core.ComponentContainer({
						name: "sap.ui.demo.wt"		
					})
				}).placeAt("content");
	</script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>

// Code goes here

/* Styles go here */

jQuery.sap.declare("sap.ui.demo.wt.Component");  
sap.ui.core.UIComponent.extend("sap.ui.demo.wt.Component", {  
   createContent : function () {  
  // create root view  
	  var oView = sap.ui.view({  
		  id : "app",  
		  viewName : "sap.ui.demo.wt.Home",  
		  type : "JS",  
	  });  
	  
	var dataObject = [
				{Product: "Power Projector 4713", Weight: "33"},
				{Product: "Gladiator MX", Weight: "33"},
				{Product: "Hurricane GX", Weight: "45"},
				{Product: "Webcam", Weight: "33"},
				{Product: "Monitor Locking Cable", Weight: "41"},
				{Product: "Laptop Case", Weight: "64"}];
	
	var model = new sap.ui.model.json.JSONModel();
		model.setData({
			modelData: {
			productsData : []
			}
			});
		oView.setModel(model);
		oView.getModel().setProperty("/modelData/productsData", dataObject); 
       
return oView;  
  }  
});

sap.ui.jsview("sap.ui.demo.wt.Home", {  
  /** Specifies the Controller belonging to this View. 
  * In the case that it is not implemented, or that "null" is returned, this View does not have a Controller. 
  * @memberOf routingdemo.App 
  */  
  getControllerName : function() {  
  return "sap.ui.demo.wt.Home";  
  },  
  /** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed. 
  * Since the Controller is given to this method, its event handlers can be attached right away. 
  * @memberOf routingdemo.App 
  */  
  createContent : function(oController) {  
  this.setDisplayBlock(true);  
	this.app = new sap.m.App("mainApp",{initialPage:"FirstPage"});

		var page = sap.ui.xmlview("FirstPage", "sap.ui.demo.wt.FirstPage");
		this.app.addPage(page);
  return this.app;  
  }  
});

sap.ui.controller("sap.ui.demo.wt.Home", {

/**
* Called when a controller is instantiated and its View controls (if available) are already created.
* Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
* @memberOf zui5_sample.Home
*/
//	onInit: function() {
//
//	},

/**
* Similar to onAfterRendering, but this hook is invoked before the controller's View is re-rendered
* (NOT before the first rendering! onInit() is used for that one!).
* @memberOf zui5_sample.Home
*/
//	onBeforeRendering: function() {
//
//	},

/**
* Called when the View has been rendered (so its HTML is part of the document). Post-rendering manipulations of the HTML could be done here.
* This hook is the same one that SAPUI5 controls get after being rendered.
* @memberOf zui5_sample.Home
*/
//	onAfterRendering: function() {
//
//	},

/**
* Called when the Controller is destroyed. Use this one to free resources and finalize activities.
* @memberOf zui5_sample.Home
*/
//	onExit: function() {
//
//	}

});

<mvc:View
  controllerName="sap.ui.demo.wt.FirstPage"
  xmlns:mvc="sap.ui.core.mvc"
  xmlns:core="sap.ui.core"
  xmlns="sap.m">
<Page
    title="XML Fragment Eventing"
    class="marginBoxContent" >
  <content>
  <FlexBox
    alignItems="Start"
    justifyContent="Center">
      <items>
      <Button
        class="sapUiSmallMarginBottom" 
        text="Show List"
        press="handleListPress"
        type="Emphasized" 
        icon="sap-icon://list"/>
      </items>
    </FlexBox>
 </content>
 </Page>
</mvc:View>

sap.ui.controller("sap.ui.demo.wt.FirstPage", {

/**
* Called when a controller is instantiated and its View controls (if available) are already created.
* Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
* @memberOf zui5_sample.Home
*/
//	onInit: function() {
//
//	},

  onExit : function () {
    if (this._oDialog) {
      this._oDialog.destroy();
    }
  },

handleListPress:function(){
      this._oDialog = sap.ui.xmlfragment("sap.ui.demo.wt.Dialog", this);
     this._oDialog.setModel(this.getView().getModel());

    // toggle compact style
    jQuery.sap.syncStyleClass("sapUiSizeCompact", this.getView(), this._oDialog);
    this._oDialog.open();
},

  handleClose: function(oEvent) {
   var oSelectedPath = oEvent.getParameter("selectedItem").getBindingContext().getPath();
   var oModel = this.getView().getModel().getProperty(oSelectedPath);
   sap.m.MessageToast.show(JSON.stringify(oModel));
  }

})

<core:FragmentDefinition
  xmlns="sap.m"
  xmlns:core="sap.ui.core">
  <SelectDialog
    noDataText="No Products Found"
    title="Select Product"
    confirm="handleClose"
    close="handleClose"
    items="{
      path: '/modelData/productsData'
    }" >
    <StandardListItem
      title="{Product}"
      description="{Weight}" 
      iconDensityAware="false"
      iconInset="false"
      type="Active" />
  </SelectDialog>
</core:FragmentDefinition>