2014-11-17 4 views
0

내 컨트롤러의 속성을보기에 바인딩하고 싶습니다. 나는 그것이 작동하지 않습니다 SAPUI5SAPUI5 :보기에 컨트롤러 속성 바인딩

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

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

에서 동일한 작업을 수행하려고 할 때 그러나

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

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

- 프레임 워크가하지 않는 것 : AngularJS와의

IT는 $ 범위를 조작하는 것만 큼 간단합니다 "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" /> 

을 그리고 기능을 제외하고 ... 모든 것을 작동합니다.

내 컨트롤러의 속성을보기에 바인딩 할 수있는 방법이 있습니까?

답변

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

    }  

}); 
+0

그래 그게 내가 생각했던 그대로, 모두 멋지다. 하지만 하위 객체 내에 내 메서드를 구성 할 수 없도록 프레임 워크를 디자인 한 이유는 무엇입니까? 왜 내 컨트롤러에서''buttonMethods : {onClick : ...}''을 정의한 다음 버튼에 함수를 붙일 수없는 것처럼 : buttonMethods : onClick ... ...' –

+0

왜 하위 오브젝트가 필요한가요? View에는 일반적으로 controllerName 속성이 XML 뷰에 정의 된 하나의 컨트롤러가 있습니다. – Allen

+0

코드를 좀더 유지 관리하기 위해 내 메서드를 구성하는 하위 개체가 필요합니다. nameButtonOnClick, streetButtonOnClick 등과 같은 이상한 명명 규칙을 가진 5 개의 다른 onClick 메소드를 갖는 대신, 각 버튼의 함수 핸들러를 하위 오브젝트로 구성하여 함께 그룹화합니다. 나는. nameButton : {onClick : ..., onHover : ...}, streetButton : {onClick : ..., onHover ...}. 그렇게하면 코드를 관리하기가 더 쉽고 궁극적으로 유지 관리가 쉽습니다. –