是否有可能在UI5結合sap.ui.base.ManagedObject到視圖

Question

我有一個顯示在sap.m.Input控制員工姓名如下

<mvc:View 
    controllerName="com.naveen.test.managedobject.controller.Employee" 
    xmlns="sap.m" 
    xmlns:mvc="sap.ui.core.mvc" 
    height="100%"> 
    <Input 
     value="{/name}" 
     liveChange="onDataChange" 
     type="Text" /> 
</mvc:View> 

而且視圖模型類如此處所示基於hint.。

sap.ui.define(["sap/ui/base/ManagedObject"], 
    function(ManagedObject) { 
    "use strict"; 
    var Employee = ManagedObject.extend("com.naveen.test.managedobject.model.Employee", { 
     metadata : { 
      properties : { 
       name : { type : "string", defaultValue:"" } 
      } 
     }, 
     set name(iName) { 
      this.setName(iName); 
     }, 
     get name() { 
      return this.getName(); 
     } 
    }); 
    return Employee; 
}); 

和Controller我只是創造了員工模型一個對象，並將其設置爲下面的視圖。

sap.ui.define(["sap/ui/core/mvc/Controller", 
      "sap/ui/model/json/JSONModel",  
      "com/naveen/test/managedobject/model/Employee"], 
function(Controller,JSONModel,Employee) { 
    "use strict"; 
    return Controller.extend("com.naveen.test.managedobject.controller.Employee", { 
     onInit : function() { 
      var employee = new Employee({ 
       name : "Naveen" 
      }); 
      this.model = new JSONModel(employee); 
      this.getView().setModel(this.model); 
     }, 
     onDataChange : function(oEvent) { 
      var value = oEvent.getParameter("value"); 
      console.log("Value in control", value); 
      console.log("Value in model", this.model.getData().getName()); 
     } 
    }); 
}); 

但是，該視圖並未從模型中獲取數據，並且模型中的任何更改都未更新模型。在這個方法中是否有任何錯誤，或者我們如何將託管對象的屬性綁定到視圖。

Answer 1

我真的不能測試此所以有可能與下面的問題，但這個想法是：

• 實例化JSON模型，並將其附加到包含{name: 'Naveen'}的看法。
• 實例化一個新Employee指向名在JSON模型
• 附加員工到屏幕

所以像：

this.getView().setModel(new JSONModel({name:'Naveen'})); 

// this is UI5 databinding. `{/name}` references the variable called 'name' 
// in the unnamed model, like above 
var employee = new Employee({name: '{/name}'); 
this.getView().addContent(employee); 

你可能要考慮通過閱讀瀏覽OpenUI5文檔中的應用程序，它會告訴你有關數據綁定的所有信息。 Here是最新版本（1.48）的鏈接，您還可以找到其他版本。

---

說明封裝，這是由JSON模型完成的。數據可以使用

this.getModel().getProperty('/name') //get 
this.getModel().setProperty('/name', 'NotNaveen') //set. 

這將傳播通過綁定系統名稱的變化（在這種情況下，它會在Employee更改名稱）進行訪問。

如果你想在模型中勢必name輸入字段：

this.getView().addContent(new Input({value: '{/name}')); 

---

什麼你可以做的，就是延長JSONModel並調用它EmployeeModel。在構造函數中，設置你想要的任何結構並調用超級構造函數。它可以像JSONModel可以綁定等一樣使用 - 同時還可以控制內部的數據。

所以要真正回答你的問題：不，你不應該這樣使用ManagedObject，使用JSONModel。

Answer 2

是的，但有一點解決方法。 我有一個自定義的BusinessObjectModel，它是標準JSONModel的繼承，但模型中的每個條目實際上都是一個類的實例。

見本github上存儲庫： https://github.com/FiddleBe/UI5-BusinessObjectModel 這是一個如何使用對象實例作爲模型項和綁定對象屬性的視圖的示例。

那裏有很多額外的功能，比如脫機持久性，你可能不需要。

我的基礎BusinessObject（您必須爲您的員工繼承）基於EventProvider而不是managedobject。但由於managedobject繼承了EventProvider，所以也許有可能改變基礎BusinessObject的擴展...無論如何..無論如何..

幾個重要注意事項： 您需要在每次執行一個事件（在我的實現PropertyUpdated中）屬性是從您的二傳手「設置」 ：

this.fireEvent("propertyUpdated", { 
    reason: sap.ui.model.ChangeReason.Binding, 
    path: "/<yourpropertyname>", 
    value: this.<yourproperty> 
}); 

在模型中繼承，您需要訂閱這個事件，每一個對象實例出現在設置中的條目。你可以做到這一點在使用setData繼承

ObjectModel.prototype.setData = function (oData, bMerge) { 
    var aData = []; 
    this.oData = []; 

    if (oData instanceof Array) { 
     aData = oData; 
    } else { 
     aData.push(oData); 
    } 

    for (var i = 0; i < aData.length; i++) { 
     var oObject = aData[i]; 
     if (this.objectClass && oObject instanceof this.objectClass) { 
     //is already an object instance.. don't change. 
     oObject.attachPropertyUpdated({ basePath: "/" + i }, this.onPropertyUpdated, this); 
     }else if (this.objectClass) { 
      oObject = new this.objectClass.getObject(aData[i], "/" + i); 
      oObject.attachPropertyUpdated({ basePath: "/" + i }, this.onPropertyUpdated, this); 
     } else { 
      oObject = aData[i]; 
     } 
     this.oData = this.oData.concat(oObject); 
    } 

    arguments[0] = this.oData.concat();//not very clean 

    Model.prototype.setData.apply(this, arguments); 
}; 

看看在GitHub上的圖書館，以及：https://github.com/FiddleBe/library 它包含了更先進的日期執行。