observableArray の更新に問題があります。ここで何かが欠けているに違いありませんが、私が持っているのはこれです:
次のように、メイン ビューモデルに格納されている値のリストがあります。
function AppViewModel() {
var self = this;
self.q1 = ko.observable().extend({ number: true });
self.q2 = ko.observable().extend({ number: true });
self.q3 = ko.observable().extend({ number: true });
self.q4 = ko.observable().extend({ number: true });
self.q5 = ko.observable().extend({ number: true });
.
.
.
平均値を計算する計算関数のリストがあります。jqxWidgets を使用してチャートを作成するための別のビューモデルもあります。これはコードです：
function ChartModel(scores) {
var self = this;
var cat;
self.scores = ko.observableArray(scores);
self.scores.push({ cat: "Re", score: vm.reAve() });
self.scores.push({ cat: "Da", score: vm.daAve() });
self.scores.push({ cat: "De", score: vm.deAve() });
self.scores.push({ cat: "Im", score: vm.imAve() });
self.scores.push({ cat: "Ps", score: vm.psAve() });
self.scores.push({ cat: "Overall", score: vm.reAve() });
//alert(self.scores()[0].score);
self.updateScores = function () {
var item = {};
item.cat = "Re";
item.score = vm.reAve();
self.scores.replace(self.scores()[0], item);
item.cat = "Da";
item.score = vm.daAve();
self.scores.replace(self.scores()[1], item);
item.cat = "De";
item.score = vm.deAve();
self.scores.replace(self.scores()[2], item);
item.cat = "Im";
item.score = vm.imAve();
self.scores.replace(self.scores()[3], item);
item.cat = "Ps";
item.score = vm.psAve();
self.scores.replace(self.scores()[4], item);
item.cat = "Overall";
item.score = vm.basAve();
self.scores.replace(self.scores()[5], item);
};
}
var vm = new AppViewModel();
var cm = new ChartModel(scores);
$(document).ready(...)ブロックの最後にバインディングを適用します。問題はscores、updateScores 関数が呼び出されたときに が更新されないことです。
<button id="btnLoad" data-bind="click: cm.updateScores">View Chart</button>
どうしても助けやアドバイスが必要です。ありがとう。
編集: フィドルを作成しましたが、残念ながらここでは何も機能しません。ラジオ ボタンは、それぞれのオブザーバブルを更新してから、合計値と平均値を計算することになっています。私のプロジェクトでは問題なく動作しますが、jsfiddle では正確に再現できないようです。過去1時間、これにこだわっています。ここにフィドルがあります：
私のプロジェクトで苦労しているのは、observableArray の値が更新されないことです。何かが欠けていると確信していますが、何がわかりません...
編集2：
私の質問モデルでは、3 つの特定の質問のスコアを取得し、それを監視可能な配列に保存してから、選択された最大値を計算しようとしています。UI を更新して変更を反映させることができないようで、console.log には何も表示されません。
function CategoryModel(cat) {
var self = this;
self.name = cat.name;
self.itemsChosen = ko.observable();
self.catquestion = ko.utils.arrayMap(cat.qs, function (q) {
return new CatQuestionModel(q.label, q.number);
});
self.catTotalScore = ko.computed(function () {
var total = 0, numItems = 0;
ko.utils.arrayForEach(self.catquestion, function (question) {
// note that ~~ converts its operand to integer (or 0 if that fails)
total += ~ ~question.score() + ~~question.mdaScoreM();
if (!(isNaN(question.score()))) {
++numItems;
self.itemsChosen(numItems);
}
});
return total;
}, self);
self.catAvgScore = ko.computed(function () {
return parseFloat(self.catTotalScore() / (self.itemsChosen() || 1)).toFixed(2);
});
}
function CatQuestionModel(question, number) {
var self = this;
self.question = question;
self.number = number;
self.score = ko.observable();
self.mdaScore = ko.observable();
self.mdaVals = ko.observableArray([]);
if (self.number == "2" || self.number == "3" || self.number == "4")
self.mdaVals.push(ko.observable({ "number": self.number, "score": self.mdaScore() }));
self.mdaScoreM = ko.computed(function () {
var x = 0;
x = ko.utils.arrayFirst(self.mdaVals(), function (i) {
return i.score === Math.max.apply(null, ko.utils.arrayMap(self.mdaVals(), function (e) {
return e.score;
}));
});
return x;
}, self);
self.mdaVals.notifySubscribers(self.mdaVals());
}
mdaVals() は 3 つの値すべてを保持するための配列であり、mdaScore は取得された最大値であると想定されています。上記のコードに何か問題がありますか？