Question

我正在创建一个自定义Control，并将数据绑定到它。单击按钮，我将更改模型中的数据，但相同的内容不会反映在DOM中。作为SAP-UI5的新手，我无法弄清楚这个问题。任何帮助将不胜感激。

我正在使用的代码：

    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');

按钮的按下功能会更改模型，但视图不会更新。如何在点击按钮和更改模型时更新视图。

此外，在使用渲染器功能时，会自动创建PersonRenderer.js。直接放置渲染功能不起作用。是什么原因？是因为聚合绑定吗？与sapui5示例一样，这样可以正常工作。

Answer 1

在开始时的对象声明中，使用“lastName”作为姓氏对象属性，但在PersonItems模板绑定中，将控件的属性“last”绑定到模型属性{last} - 模型没有' t有一个名为'last'的属性，它有一个名为'lastName'的属性。更改绑定以使用属性'lastName'。

自定义控件中的双向绑定在SAPUI5中不起作用

1 个答案: