Страница не обновляется

Question

Привет, У меня есть ситуации, когда я получаю наблюдаемые в witch. У меня есть несколько свойств, включая наблюдаемый массив.

Мне нужно сгруппировать этот наблюдаемый массив, чтобы иметь возможность отображать их 5 iems за один раз с родителями тега раздела.

Это мой HTML:

<div data-bind="foreach: groupedQuestions"> 
    <section> 
     <!-- ko foreach: $data --> 
     <article> 
      <!-- ko if: hasGrade--> 
      <header data-bind="text: description"></header> 
      <ul> 
       <li><a href="#">1</a></li> 
       <li><a href="#">2</a></li> 
       <li><a href="#">3</a></li> 
       <li><a href="#">4</a></li> 
       <li><a href="#">5</a></li> 
       <li><a href="#">6</a></li> 
       <li><a href="#">7</a></li> 
       <li><a href="#">8</a></li> 
       <li><a href="#">9</a></li> 
       <li><a href="#">10</a></li> 
      </ul> 
      <!-- /ko --> 
      <!-- ko if: hasMemo--> 
      <header data-bind="text: memoTitle"></header> 
      <textarea></textarea> 
      <!-- /ko --> 
     </article> 
     <!-- /ko --> 
    </section> 
</div> 

Это код, я использую, чтобы сгруппировать observableArray:

function categoryIdChanged(category) {  
     vm.category(category); 
     vm.groupedQuestions = ko.computed(function() { 
      var groups = []; 
      var index = 0; 
      var group; 
      ko.utils.arrayForEach(category.questions(), function (item) { 
       if (index % 5 === 0) { 
        group = []; 
        groups.push(group); 
       } 
       group.push(item); 
       index++; 
      }); 
      return groups; 
     }); 
    } 

Это категория модель:

categories: [{ 
    categoryId: 1, 
    title: "Docent", 
    hasMemo: true, 
    memoIsMandatory: false, 
    memoTitle: "Docent Opmerkingen", 
    questions: [{ 
     questionId: 11, 
     description: "De docent is goed voorbereid", 
     hasGrade: false, 
     hasMemo: true, 
     showOnlyMemo: true, 
     memoTitle: "De docent is goed voorbereid" 
    }, { 
     questionId: 12, 
     description: "De docent heeft kennis van zaken", 
     hasGrade: true, 
     hasMemo: false, 
     showOnlyMemo: false, 
     memoTitle: "De docent heeft kennis van zaken" 
    }, { 
     questionId: 13, 
     description: "De docent kan de onderwerpen boeiend uitleggen", 
     hasGrade: true, 
     hasMemo: false, 
     showOnlyMemo: false, 
     memoTitle: "De docent kan de onderwerpen boeiend uitleggen" 
    }, { 
     questionId: 14, 
     description: "De docent gaat goed in op de vragen uit de groep", 
     hasGrade: true, 
     hasMemo: false, 
     showOnlyMemo: false, 
     memoTitle: "De docent gaat goed in op de vragen uit de groep" 
    }, { 
     questionId: 15, 
     description: "De docent stimuleert de groep tot actieve deelname", 
     hasGrade: true, 
     hasMemo: false, 
     showOnlyMemo: false, 
     memoTitle: "De docent stimuleert de groep tot actieve deelname" 
    }, { 
     questionId: 16, 
     description: "De docent voegt inhoudelijk iets toe aan het studiemateriaal", 
     hasGrade: true, 
     hasMemo: false, 
     showOnlyMemo: false, 
     memoTitle: "De docent voegt inhoudelijk iets toe aan het studiemateriaal" 
    }, { 
     questionId: 17, 
     description: "De docent is praktijkgericht", 
     hasGrade: true, 
     hasMemo: false, 
     showOnlyMemo: false, 
     memoTitle: "De docent is praktijkgericht" 
    }, { 
     questionId: 18, 
     description: "Totaal oordeel over de docent", 
     hasGrade: true, 
     hasMemo: false, 
     showOnlyMemo: false, 
     memoTitle: "Totaal oordeel over de docent" 
    }] 
}, { 
    categoryId: 7, 
    title: "Opbouw programma en studiemateriaal", 
    hasMemo: true, 
    memoIsMandatory: false, 
    memoTitle: "Opbouw programma en studiemateriaal Opmerkingen", 
    questions: [{ 
     questionId: 54, 
     description: "Het studieprogramma is duidelijk opgebouwd", 
     hasGrade: true, 
     hasMemo: false, 
     showOnlyMemo: false, 
     memoTitle: "Het studieprogramma is duidelijk opgebouwd" 
    }, { 
     questionId: 55, 
     description: "Het studiemateriaal is compleet, goed leesbaar en praktijkgericht", 
     hasGrade: true, 
     hasMemo: false, 
     showOnlyMemo: false, 
     memoTitle: "Het studiemateriaal is compleet, goed leesbaar en praktijkgericht" 
    }] 
}], 

ideea что моя страница будет содержать несколько ссылок. Каждая ссылка будет соответствовать одной категории. И после того, как каждая ссылка будет нажата, ist вопросов отображаются. Моя проблема в том, что мой список страниц не обновляется, когда я нажимаю ссылку. Это не произошло, прежде чем я создал вычисляемое значение, поэтому я полагаю, что это должно быть что-то связанное с этим.

Кто-нибудь знает, что мне не хватает?

Answer 1

В вашем categoryIdChanged вы пересматриваете свой groupedQuestions каждый раз, когда вызывается метод.

Вам нужно только определить ваш groupedQuestions раз и внутри вашего вычислен вы можете ссылаться на ваш vm.category, а затем Kncokout будет автоматически обновлять ваш groupedQuestions когда ваши vm.category изменения в функции categoryIdChanged.

Так что вам нужно будет перестроить свой код, чтобы что-то вроде этого:

function categoryIdChanged(category) { 
    vm.category(category); 
} 

vm.groupedQuestions = ko.computed(function() { 
    var groups = []; 
    var index = 0; 
    var group; 
    if (!vm.category()) // no category is selected return empty groups 
     return groups; 
    ko.utils.arrayForEach(vm.category().questions(), function (item) { 
     if (index % 5 === 0) { 
      group = []; 
      groups.push(group); 
     } 
     group.push(item); 
     index++; 
    }); 
    return groups; 
});