自定义UI5控件绑定OData属性值不生效如何解决

• 元数据中可绑定属性配置错误：valuePrice的bindable属性需要赋值布尔值true，而非字符串"bindable"，UI5只有识别到bindable: true时才会生成完整的绑定处理逻辑，自动响应模型数据更新。
• 渲染器直接拼接内容存在XSS风险，且不符合UI5渲染规范。

1. 修改元数据配置 #

将valuePrice属性的bindable改为true，默认情况下UI5自动生成的属性Setter会在数值更新时触发控件重渲染，无需额外配置：

properties: {
    "valuePrice": {
        type: "string",
        bindable: true // 修正为布尔值true
    }
}

2. 优化渲染器写法 #

避免直接拼接动态内容，使用writeEscaped防止XSS漏洞：

renderer: function (oRm, oControl) {
    oRm.write('<div class="zgutCheckPriceWrap">');
    oRm.write('<div class="zgutPriceWrap">');
    oRm.writeEscaped(oControl.getValuePrice() || ""); // 转义动态输出内容
    oRm.write('</div>');
    oRm.renderControl(oControl.getAggregation("_label"));
    oRm.renderControl(oControl.getAggregation("_button"));
    oRm.write('</div>');
}

3. （可选）自定义属性更新逻辑 #

如果需要在属性更新时执行额外逻辑，可以重写setValuePrice方法：

setValuePrice: function(sValue) {
    // 第三个参数为是否禁止自动重渲染，默认false会自动触发控件重绘
    this.setProperty("valuePrice", sValue);
    // 此处可添加自定义逻辑
    return this; // 保留链式调用能力
}

修复后重新运行项目，<cc:CheckPrice valuePrice="{Price}"/>即可和标准Text控件一样正常响应OData模型的数值更新。

内容的提问来源于stack exchange，提问作者tanto39