Knockoutjs计算未从observableArray更新

Knockoutjs computed not updated from observableArray

本文关键字：observableArray 更新 计算 Knockoutjs      更新时间：2024-01-20

我希望在更新可观察数组时更新计算。数组中填充了问题和答案（是或否）。当用户更改问题的答案时，我希望某个区域可见或不可见。

因此，如果其中一个问题的答案是"oui"，那么计算出的is5B应该是真的，这应该使部分可见。

计算的is5B只在初始化时计算，当数组更新时不会触发（它更新了，我用断点检查了）

这是视图模型：

var section5Model = ko.validatedObservable({
    Questions5A: ko.observableArray(GetQuestions('5A')),
    Questions5B: ko.observableArray(),
    Questions5C: ko.observableArray(),
    ContactAQ: ko.observable(),
    Date: ko.observable(''),
    Heure: ko.observable(''),
    CategorisePar: ko.observable(''),
    DateCategorise: ko.observable(''),
    RepOuiNon: [{ label: 'Oui', value: 0 }, { label: 'Non', value: 1 }]
});
section5Model().is5B = ko.computed(function () {
    this.Questions5A().forEach(function (item) {
        if (item.reponse == 'Oui') {
            return true;
        }
    });
}, section5Model());

这是标记：

<div id="sectionContainer">
    <div id='S5FormBlock1' class="formSection5">
        <div id="QSection5A" data-bind="foreach: Questions5A">
            <div class='mockTable'>
                <div class="column200 centerLabel"><span data-bind="text: Texte"></span></div>
                <div class="grayRoundBorder padR10" data-bind="foreach: $parent.RepOuiNon">
                    <input type="radio" data-bind="value: label, attr : {name: $parent.ID}, checked: $parent.reponse" /><span data-bind="text: label"></span>
                </div>
            </div>
            <p />
        </div>
        <div data-bind="visible: is5B">Il s'agit d'une plainte qualité</div>
        <div id="QSection5B" data-bind="visible: is5B,foreach: Questions5B">
            <div class='mockTable'>
                <div class="column200 centerLabel"><span data-bind="text: Texte"></span></div>
                <div class="grayRoundBorder padR10" data-bind="foreach: $parent.RepOuiNon">
                    <input type="radio" data-bind="value: label, attr : {name: $parent.ID}, checked: $parent.reponse" /><span data-bind="text: label"></span>
                </div>
            </div>
            <p />
        </div>
        <div data-bind="visible: is5C">Il s'agit d'une plainte d'insatisfaction</div>
        <div id="QSection5C" data-bind="visible: is5C,foreach: Questions5C">
            <div class='mockTable'>
                <div class="column200 centerLabel"><span data-bind="text: Texte"></span></div>
                <div class="grayRoundBorder padR10" data-bind="foreach: $parent.RepOuiNon">
                    <input type="radio" data-bind="value: label, attr : {name: $parent.ID}, checked: $parent.reponse" /><span data-bind="text: label"></span>
                </div>
            </div>
            <p />
        </div>
    </div>
</div>

您遇到的问题是item.response不可观测。所以，如果它改变了KnockoutJS并不知道这一点。要解决这个问题，你必须将其更改为可观察

section5Model().is5B = ko.computed(function () {
    this.Questions5A().forEach(function (item) {
        if (item.reponse() == 'Oui') {
            return true;
        }
    });
}, section5Model());

Computed是依赖于一个或多个其他可观察性的函数，只要这些依赖关系发生变化，就会自动更新。所以在你的情况下，在你的计算函数中没有可观察到的。因此使至少一个边上的变量被计算为可观测的。在您的情况下，请将item.response设置为可观察的。为此，您需要在GetQuestions('5A') 上返回可观察变量

请回答问题5A像一样的observableArray

 var section5Model = ko.validatedObservable({
        Questions5A: ko.observableArray([
                {reponse : ko.observable('reponse 1 ') },
                {reponse : ko.observable('reponse 2') },
                /* other objects */
        ]),      
        /* other code  */
相关文章：