javascript - SAPUI5:将 Controller 属性绑定(bind)到 View

Question

我想将属性从 Controller 绑定(bind)到 View 。

在 angularjs 中，它就像操作 $scope 一样简单:

$scope.buttonProps = {
    value: 'cheese',
    disabled: 'disabled',
    onClick: function() {}
};

<custom-button disabled="buttonProps.disabled" onclick="buttonProps.onClick" value="{{buttonProps.value}}" />

但是当我尝试在 SAPUI5 中执行相同操作时

sap.ui.core.mvc.Controller.extend('...', {
    buttonProps: {
        value: 'cheese',
        disabled: 'disabled',
        onClick: function() {}
    }
});

<custom-button value="{buttonProps.value}" disabled="{buttonProps.disabled}" click="buttonProps.onClick" />

它不起作用 - 框架似乎无法访问“buttonProps”对象的属性。

但是，如果我将属性直接移动到 Controller 上，它就可以工作

sap.ui.core.mvc.Controller.extend('...', {
    value: 'cheese',
    disabled: 'disabled',
    onClick: function() {}
});

<custom-button value="{value}" disabled="{disabled}" click="onClick" />

但是，当然，当您获得更复杂的 View 时，这是一种非常无组织的工作方式。

我尝试创建 JSONModel 并通过模型绑定(bind)值:

sap.ui.core.mvc.Controller.extend('...', {
    buttonProps: new sap.ui.model.json.JSONModel({
        value: 'cheese',
        disabled: 'disabled',
        onClick: function() {}
    })

    onAfterRendering: function() {
        this.byId('btn').setModel(this.buttonProps);
    }
});

<custom-button id="btn" value="{/value}" disabled="{/disabled}" click="/onClick" />

它适用于一切......除了函数。

有没有办法将属性从 Controller 绑定(bind)到 View ？

Answer 1

UI5 遵循 M-V-C范例和事件处理程序不是数据模型的一部分。

正确的数据绑定(bind)方法如下:

查看:

onClick 被定义为 Controller 中的函数，而不是数据模型中的函数。

<custom-button id="btn" value="{/value}" disabled="{/disabled}" click="onClick" />

Controller :

sap.ui.core.mvc.Controller.extend('...', {

    buttonProps: new sap.ui.model.json.JSONModel({
        value: 'cheese',
        disabled: 'disabled'
    }),

    onInit: function() {
        this.byId('btn').setModel(this.buttonProps);
    },

    onClick:function(oEvent) {

    }    

});