2015-04-07 38 views
2

我正在創建自定義控件並將數據綁定到它。點擊按鈕時,我正在更改模型中的數據,但是DOM中沒有反映這一點。作爲SAP-UI5的新手,我無法弄清楚這個問題。任何幫助,將不勝感激。自定義控件中的雙向綁定在SAPUI5中不起作用

我使用的代碼:

var aData = { person : [{firstName:"Bruce", lastName:"Wayne"}] }; 
    //set Model 
    var oModel = new sap.ui.model.json.JSONModel(aData); 
    sap.ui.getCore().setModel(oModel); 

    //Declaring Renderer 
    jQuery.sap.declare("PersonRenderer"); 
    PersonRenderer={render : function (oRm, oControl){ 
        oRm.write("<ul style = 'margin:20px 50px;'"); 
        oRm.writeControlData(oControl); 
        oRm.write(">"); 

        var aItems = oControl.getModel().getData().persons; 
        for(var i=0,l=aItems.length; i<l; i++){ 
         oRm.write("<li style='padding-top : 20px; font-size : 16px; border : 1px solid #cecece; color : #006699; font-weight : bold'> "); 
         oRm.write(aItems[i].firstName); 
         oRm.write("&nbsp;"); 
         oRm.write(aItems[i].last); 
         oRm.write("</li>"); 
        } 
        oRm.write("</ul"); 
       } } 

    //Creating custom Element for binding. 
    //**Can we skip this and use existing controls like *TextField***???// 

    sap.ui.core.Element.extend("PersonItems",{ 
     metadata : { 
      properties : { 
       "first" : {type : "string"}, 
       "last" : {type : "string"} 
      } 
     } }); 

     //Declaring custom control 
     sap.ui.core.Control.extend("Person",{ 
     metadata : { 
      properties : { 
       aggregations : { 
        "items" : {type : "PersonItems", multiple : true, singularName : "Name_Singular"} 
       }, 
       defaultAggregation : "items" 
      }, 
      renderer : PersonRenderer 
     } }); 

    //creating custom control 
    var mPerson = new Person({ 
     items : { 
      path : "/persons", 
      template : new PersonItems({ first : "{firstName}", last : "{last}"}) 
      } 
     }); 

    //Creating a button 
    var oBtn = new sap.ui.commons.Button('btn',{ 
     text : "Click", 
     press : function(){ 
      //changed the model's property 
      var model = sap.ui.getCore().getModel(); 
      model.setProperty("/persons/0/last",'Dog'); 
     } 
    }) 

    mPerson.placeAt('master'); 
    oBtn.placeAt('master'); 

按鈕的按下功能更改模型,但視圖不更新。如何更新點擊按鈕和模型更改的視圖。

另外,在使用renderer函數時,PersonRenderer.js是自動創建的。直接放置渲染功能不起作用。是什麼原因?這是因爲聚合綁定?和sapui5的例子一樣,這個工作正常。

+0

我看到你在自定義控件('oControl.getModel()。getData()。persons')中引用了一個模型,這是一個不可以;-) 總是使用生成的getters/setters,即我相信'oControl.getItems()'爲'物品'聚合在你的情況 – Qualiture

回答

1

在開始的對象聲明中,您使用lastName作爲姓氏對象屬性,但在PersonItems模板綁定中,將控件的屬性'last'綁定到模型屬性{last} - 模型不會沒有名爲'last'的屬性,它有一個名爲'lastName'的屬性。將綁定更改爲使用屬性'lastName'。

相關問題