0

こんにちは、魔女で観測可能なものを受け取っている状況があります。観測可能な配列を含むいくつかのプロパティがあります。

セクションタグの親で一度に5つのiemを表示できるように、その監視可能な配列をグループ化する必要があります。

これは私の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"
    }]
}],

ページに複数のリンクが含まれるという考えです。各リンクは 1 つのカテゴリに対応します。各リンクをクリックすると、質問のリストが表示されます。問題は、リンクをクリックしてもページのリストが更新されないことです。これは、計算値を作成する前には発生しなかったため、それに関連するものであるに違いないと考えています。

誰かが私が欠けているものを知っていますか?

4

1 に答える 1

1

メソッドが呼び出されるたびに、あなたcategoryIdChangedはあなたを再定義しています。groupedQuestions

一度定義するだけgroupedQuestionsで、計算された内部で参照でき、関数の変更時に vm.categoryKncokout が自動的に更新します。groupedQuestionsvm.categorycategoryIdChanged

したがって、コードを次のように再構築する必要があります。

 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 に答える