2013-07-29 106 views
0

嗨我有一種情況,我收到一個可觀察女巫我有幾個屬性,包括可觀察數組。頁面不更新

我需要組觀察到的陣列能夠在第標籤的父母的時間以顯示它們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是我的網頁將包含幾個鏈接。每個鏈接將包含一個類別。每個鏈接點擊後我的問題是,當我點擊鏈接時,我的頁面列表沒有得到更新。在我創建計算值之前,這並沒有發生,所以我認爲它必須是與此相關的東西。

有人知道我失蹤了嗎?

+2

做一個小提琴,並給予更多的解釋清楚哪些是你正在嘗試做的。 – Damien

回答

1

在你categoryIdChangedgroupedQuestions每次重新定義當方法被調用。

你只需要定義你的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; 
});