2013-07-29 81 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; 
});