淘汰赛observablearray没有得到更新

时间:2014-06-16 11:56:11

标签: knockout.js jqxwidgets

我在更新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 });
.
.
.

我有一个计算平均值的计算函数列表。我还有一个单独的viewmodel用于使用jqxWidgets创建Chart。这是代码:

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(...)块的末尾应用绑定。问题是调用updateScores函数时scores永远不会更新:

<button id="btnLoad" data-bind="click: cm.updateScores">View Chart</button>

迫切需要帮助/建议。 感谢。

修改 创造了一个小提琴但不幸的是这里没有任何作用。单选按钮应该更新它们各自的可观察量,然后计算总值和平均值。它在我的项目中工作正常,但我似乎无法在jsfiddle中准确地再现它。过去一小时一直坚持这一点。这是小提琴:

http://jsfiddle.net/JPQ55/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应该是获得的最大值。上面的代码有什么问题吗?

1 个答案:

答案 0 :(得分:0)

如果希望在数组内对象上的值发生更改时更新页面上的值,则需要将对象上的每个值声明为observable。

self.mdaVals = ko.observableArray([]);

self.mdaVals.push({ number: ko.observable(1), score: ko.observable(20)});

self.mdaVals()[0].number(2);

self.mdaVals()[0].score(10);

http://jsfiddle.net/tm5J9/1/