javascript - 自定义控件中的双向绑定(bind)在 SAPUI5 中不起作用

Question

我正在创建一个自定义控件，并将数据绑定(bind)到它。单击按钮时，我正在更改模型中的数据，但 DOM 中没有反射(reflect)出来。作为 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 函数改变了模型，但是 View 没有更新。如何在单击按钮和更改模型时更新 View 。

此外，在使用渲染器功能时，会自动创建 PersonRenderer.js。直接放置渲染函数是行不通的。是什么原因？是因为聚合绑定(bind)吗？在 sapui5 示例中，这工作正常。

Answer 1

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