Question

我想将控制器中的属性绑定到视图。

在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”对象的属性。

但是，如果我将属性直接移动到控制器上，则可以正常工作

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

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

但当然，当你获得更复杂的观点时，这是一种非常混乱的工作方式。

我尝试创建一个JSONModel并通过模型绑定值：

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" />

它适用于所有事情......除了功能。

我有办法将控制器中的属性绑定到视图吗？

Answer 1

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

进行数据绑定的正确方法如下：

查看：

onClick被定义为控制器中不在数据模型中的函数。

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

<强>控制器：

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) { } });

SAPUI5：将控制器属性绑定到视图

1 个答案: