버튼을 클릭하여 그룹화 된 GridLayout 목록보기를 필터링하려고합니다.

Question

WinJs를 배우고 있지만 내 응용 프로그램에 문제가 있습니다. Gridlayout에 표시되는 Grouped ListView가 있습니다. 템플릿을 사용하고 템플릿의 헤더에 세 개의 버튼이 있습니다. 내 자바 스크립트에서 나는 목록을 중요도별로 필터링 한 다음 그룹화하는 기능을 가지고 있습니다. 버튼을 클릭하면 중요도를 전달한 다음 필터에서 사용합니다. 내가 겪고있는 문제는 버튼을 클릭했지만 표시가 변경되지 않을 때 필터링 및 그룹화 기능이 호출된다는 것입니다.

사이트를 검색 한 결과 도움이 될만한 몇 가지 주제를 찾았지만 모두 Android 앱용이었습니다.

누구든지 내가 뭘 잘못하고 있다고 말할 수 있습니까?

코드 :

[data.js]

(function() { 
    "use strict"; 

    var groupedItemsList; 
    var jobStatusCriticality = ""; 
    var groupedJobs, filteredDataList; 

    var dataList = new WinJS.Binding.List(); 

    function listData() { //removed for web} 

    WinJS.Namespace.define("JobGroup.Functions", { 
    setupJobGroup: function setupGroup(jsc) { 
     if (jsc != "") { 
      filteredDataList = dataList.createFiltered(
       function (dataItem) { 
        if (dataItem.jobCriticality == jsc) { 
         return true; 
        } 
        else { 
         return false; 
        } 
       } 
     ); 
      filteredDataList.notifyReload(); 
     } 
     else { 
      filteredDataList = dataList; 
     } 

     groupedJobs = filteredDataList.createGrouped(
      function (dataItem) { 
       return dataItem.jobStatus; 
      }, 
      function (dataItem) { 
       return { status: dataItem.jobStatus }; 
      }, 
      function (first, second) { 
       return first.charCodeAt(0) - second.charCodeAt(0); 
      } 
     ); 
    } 
}); 

JobGroup.Functions.setupJobGroup(jobStatusCriticality); 
WinJS.Namespace.define("DataExample", { myList: groupedJobs }); 
WinJS.UI.processAll().then(listData); 

[default.html을]

<div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template"> 
    //remove for web 
</div> 

<div id="headerTemplate" data-win-control="WinJS.Binding.Template"> 
    <div id="sortType"> 
    <div id="sortAll"><span><button id="viewAllBtn" type="button" onclick="JobGroup.Functions.setupJobGroup('')">View All</button></span></div> 
    <div id="sortCritical"><span><button id="viewCriticalBtn" type="button" onclick="JobGroup.Functions.setupJobGroup('CRITICAL')">Critical</button></span></div> 
    <div id="sortWarning"><span><button id="viewWarningBtn" type="button" onclick="JobGroup.Functions.setupJobGroup('WARNING')">Warning</button></span></div> 
    </div> 
</div> 

<div id="groupedListView" 
    data-win-control="WinJS.UI.ListView" 
    data-win-options="{itemDataSource: DataExample.myList.dataSource, 
    itemTemplate: select('#mediumListIconTextTemplate'), 
    groupDataSource: DataExample.myList.groups.dataSource, 
    groupHeaderTemplate: select('#headerTemplate'), 
    layout: {type: WinJS.UI.GridLayout}}"> 
</div> 

가 [default.js] // 표준 기본 코드를 포함

Answer 1

빠른 스캔을하기 때문에 조금만 놀아야 할 수도 있지만, 이것이 야구장에 있다고 생각합니다 ...

ListView을 데이터 소스으로 업데이트해야합니다. 당신이 지금 묶는 방법은, 리스트 to myList.dataSource입니다. 실제로는 groupedJobs입니다. 단추를 클릭하면 새 데이터 정렬이 만들어 지지만 createGrouped은 전혀 새로운 개체를 생성하므로 ListView에 무언가가 변경되었다는 알림이 없습니다. ListView은 여전히 ​​이전 개체에 바인딩되어 있습니다. 당신의 되는 listData 함수의 끝에서

groupedListView.winControl.itemDataSource = groupedJobs.dataSource; 
groupedListView.winControl.groupDataSource = groudedJobs.groups.dataSource; 

를 호출하면 내가 생각하는 트릭을 할 것입니다.