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"
    }]
}],

我的想法是我的页面将包含多个链接。每个链接将对应一个类别。单击每个链接后，会显示一个问题列表。我的问题是当我单击链接时我的页面列表没有更新。这在我创建计算值之前没有发生，所以我认为它一定与此相关。

有人知道我错过了什么吗？

4

1 回答 1

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;
 });
于 2013-07-29T10:50:40.213 回答