自定义控件中的两种方式绑定在 SAPUI5 中不起作用答案

【问题标题】：Two Way Binding in Custom Control Not Working in SAPUI5自定义控件中的两种方式绑定在 SAPUI5 中不起作用
【发布时间】：2015-04-07 20:40:43
【问题描述】：

我正在创建一个自定义控件，并将数据绑定到它。单击按钮时，我正在更改模型中的数据，但在 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');

按钮的Press功能改变了模型，但视图没有更新。如何在单击按钮和更改模型时更新视图。

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

【问题讨论】：

我看到您在自定义控件 (oControl.getModel().getData().persons) 中引用了一个模型，这是禁止的 ;-) 始终使用生成的 getter/setter，即我相信 oControl.getItems() 用于items 聚合在您的情况下
aggregation 在 properties 对象中被错误地声明。它应该是Person 控件定义中metadata 对象的直接成员。
PersonRenderer 缺少 > oRm.write("</ul");
数据对象包含名为lastName 的键，但您绑定的是{last}。它应该是 {lastName} - 与密钥名称相同。因此model.setProperty 的路径也应该是/persons/0/lastName
数据对象以person 键开头。但是，应用程序的其余部分使用persons。

标签： javascript model-view-controller sapui5

【解决方案1】：

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

【讨论】：