Question

嗨我有一种情况，我正在接受一个女巫的观察，我有几个属性，包括一个可观察的阵列。

我需要对可观察数组进行分组，以便能够与分段标记的父母一次显示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"
    }]
}],

这就是我的页面将包含几个链接。每个链接都会对应一个类别。点击每个链接后会显示一个问题列表。我的问题是当我点击时我的页面列表没有更新链接。这在我创建计算值之前没有发生，因此我认为它必须与之相关。

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

Answer 1

在您的categoryIdChanged中，每次调用此方法时，您都会重新定义groupedQuestions。

您只需要定义groupedQuestions一次，在计算中，您可以引用vm.category，然后当您groupedQuestions更改时，Kncokout会自动更新您的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;
 });

页面没有更新

1 个答案: