2014-11-24 2 views
1

이것은 기본적으로 여기에 질문에 대한 해결의 재판이다 "How to use custom sorter in XML views"SAPUI5에서 컨트롤러의 목록 분류기를 설정하는 방법은 무엇입니까?

현재는 XML 뷰에 사용자 정의 분류기를 사용할 수 없기 때문에, 나는 컨트롤러에서 분류기를 설정할 수 있습니다 어쩌면 생각했다.

당신은 어떻게 그 JS보기는 다음과 같이이다와 함께 :

var oTemplate = ... // irrelevant 

var oList = new sap.m.List({ 
    id: this.createId("someList"), 
    items: { 
     path: "/list", 
     template: oTemplate, 
     sorter: foo.bar.CustomSorter 
    } 
}); 

을 내가와 XML 뷰 것을 변환 할 때, 나는 다음과 같습니다 그런

<m:List id="someList" 
     items="{path: '/list'}"> 
    <!-- hid ListItem implementation --> 
</m:List> 

방법 컨트롤러 목록에서 분류기를 설정할 수 있습니까? 또한 어디서 연결할 수 있습니까? 옵션 :

  • onInit
  • onBeforeRendering
  • onAfterRendering

그럼, 내가 기대하는 것은 같은 것이었다 :

sap.ui.controller("foo.bar.controller.SomeController", { 
    onInit : function(){ 
     var oList = this.getView().byId("someList"); 
     oList.get___Something___().setSorter(foo.bar.CustomSorter); 
    }; 
}; 

을하지만 수없는 것 같다.

답변

0

onInit이 좋을 것입니다.

목록의 방법 bindItems을 사용하여 항목을 바인딩하고 분류기를 적용하십시오.

뭔가 같은 :

oList.bindItems ('/ 목록', ListItemTemplate, foo.bar.CustomSorter);

감사합니다, 킴모

+1

흠, 그 작동합니다. 그러나, 내가 원했던 것은 XML 뷰에서 템플릿에 대한 정의를 유지하는 것입니다. 나는이 방법으로는 불가능하다고 생각합니다. 'bindItems' 호출에서 템플릿 매개 변수를 비워두면 다음과 같은 메시지가 나타납니다. '잡히지 않은 오류 : 요소의 집계 항목에 대한 템플릿 또는 팩토리 함수가 누락되었습니다.' 맞춤 분류기를 사용하면 결국 전체 JS보기의 애플리케이션. JS 코드에서 집계를위한 템플릿을 정의해야하는 경우 JS보기보다 XML보기에 이점이 없습니다. 답변 주셔서 감사합니다 –

+0

경로 및 템플릿을 포함한 전체 바인딩이 아닌 * 분류기 *를 설정할 수 있는지 알고 계십니까? –

+0

예, JS로 바인딩하는 대신 XML로 선언해야합니다. UI5의 향후 버전에서 수정 될 것으로 예상됩니다. 질문 : 바인딩 정의를 두 위치에 혼합 할 수 없다고 생각합니다. 마지막 정의는 첫 번째 정의보다 우선합니다. 또한 한 곳에서 바인딩을 정의하는 것이 더 명확합니다 (이 경우 컨트롤러에서). – kjokinen

1

당신은 이런 식으로 그것을 할 수 있습니다

onInit: function() { 
    var SORTKEY = "someSortKey"; 
    var DESCENDING = true; 
    var GROUP = false; 
    var oList = this.getView().byId("someList"); 
    var oBinding = oList.getBinding("items"); 
    var aSorter = []; 
    // you may use foo.bar.CustomSorter instead: 
    aSorter.push(new sap.ui.model.Sorter(SORTKEY, DESCENDING, GROUP)); 
    oBinding.sort(aSorter); 
} 
+0

이 onAfterRendering –

+0

에서 수행되어야한다 이것은 Sorter를 바인딩에 추가하지만 바인딩이 이미 완료 되었기 때문에 목록이나 테이블이 자동으로 업데이트 될 것이라고 기대하지는 않습니다. – Chip

5

당신은 바인딩 목록의 정렬 속성을 사용할 수 있습니다 :

<List 
     id="invoiceList" 
     class="sapUiResponsiveMargin" 
     width="auto" 
     items="{ 
     path : '/Invoices', 
     sorter : { 
      path : 'ProductName' 
     } 
     }" > 

https://sapui5.hana.ondemand.com/#docs/guide/c4b2a32bb72f483faa173e890e48d812.html

I 또한 onInit, unfortunatel로 분류기를 설정하려고했습니다. 이 시점에서 this.getView(). byId ("whateverID")가 실패했습니다 ...

2

JSView에서 집계 바인딩의 경우 컨트롤에 모델과 템플릿을 제공해야합니다. 우리가 가서 aggregationBinding에 대한 템플릿을 만들 수 있습니다, 우리가 할당 된 데이터로 JSONModel있어 이제

var oModel = new sap.ui.model.json.JSONModel(); 
var oData = { 
    users: [ 
     { 
      id: '15', 
      name: 'Peter' 
     }, 
     { 
      id: '16', 
      name: 'Angela' 
     } 
    ] 
}; 
oModel.setData(oData); 

:

의 우리가 sap.ui.model.json.JSONModel를 사용하는 가정 해 봅시다 :

var oItemTemplate = new sap.m.StandardListItem(); 
oItemTemplate.bindProperty('title', {path: 'name'}); 

이제 우리는 목록 항목을 만드는 데 사용할 템플릿 목록 항목을 얻었습니다.현재 우리는 바인딩이 완료된 후 모든 사용자의 ID 정보를 "느슨하게"합니다. 그래서 그냥에서는 CustomData로 사용자 ID를 결합하자

var oCustomData = new sap.ui.core.CustomData({ 
    key: 'id' 
}); 
oCustomData.bindProperty('value', {path: 'id'}); 
oItemTemplate.addCustomData(oCustomDataId); // adds the custom data to the template 

나중에 우리가 키/값 쌍으로 대응을 ListItem에서이에서는 CustomData를 검색 할 수 있습니다에.

이제는 사용자 지정 정렬기를 바인딩 구성에 추가하려고합니다. 여기서는 항목을 "이름"속성별로 정렬하는 새로운 분류기를 만듭니다.

var oSorter = new sap.ui.model.Sorter('name'); 
var oBindingInfo = { 
    path: '/users', 
    template: oItemTemplate, 
    sorter: oSorter 
}; 

마지막 단계에서는 항목을 Google 컨트롤에 바인딩해야합니다. 이 경우 sap.mList 컨트롤을 사용합니다.

var oList = new sap.m.List(); 
oList.setModel(oModel); 

oList.bindItems(oBindingInfo); 

이 예제는 단순한 사용 사례 일뿐입니다. 컨트롤을 인스턴스화하는 데 사용되는 모든 추가 구성 매개 변수를 무시 했으므로 아직 수행 할 작업이있을 수 있습니다. 이 예에서는 일반 데이터 바인딩 및 정렬 만 다룹니다.

은 자세한 내용은 다음을 참조하십시오

https://sapui5.hana.ondemand.com/docs/api/symbols/sap.ui.base.ManagedObject.html#bindAggregation

https://sapui5.hana.ondemand.com/#docs/guide/4ce11a576ef44bb680c81b36a0462e86.html

관련 문제