0

KnockoutJSを学び、レンガの壁にぶつかります。ゲーム用の電卓を作る。要約されたバージョンは以下のとおりです。

ユーザー入力'neededXp'。配列は、「neededXp」が更新されるたびに「need」を再計算する必要があります。

self.neededXp = ko.observable(0);

function calcItem(name, image, xp, level) {
    this.name = name;
    this.level = level;
    this.xp = xp;
    this.need = ko.computed(function() {
        var req = self.neededXp()/this.xp;
        return req;
    });
}

self.calcContent = ko.observableArray([

]);

self.populateFishing = function() { 
self.calcContent.push(calcItem('Shrimp','#',1,10));
self.calcContent.push(calcItem('Sardine','#',5,20));
self.calcContent.push(calcItem('Shark','#',110,76));
self.calcContent.push(calcItem('Sea Turtle','#',38,79));
self.calcContent.push(calcItem('Manta Ray','#',46,81));
    }

現時点では、初めて完全に計算され、「 neededXp」が更新されると、すべての値が正しい「neededXp」で再計算されるように見えますが、配列内の各インデックスの計算されたオブザーバブルは、配列の最後のメンバー。

明確にするために、「neededXp」を更新すると、すべてのメンバー「need」は、それぞれのインデックスではなく、マンタレイ値から「xp」を使用して再計算されます。

おそらく本当に明白なことですが、誰かが私に指示してくれることを願っています。

編集：コードを読み直した後、なぜそれが起こっているのかはわかると思いますが、修正方法がわかりません。意味があるのであれば、配列内の「xp」値を維持する方法がわかりません。

EDIT2 ：http: //jsfiddle.net/sTnY7/使いやすさのために縮小されたサイズの配列を持つjsfiddle。魚のボタンを押してテーブルにデータを入力し、問題の最も簡単なデモンストレーションのために「目標レベル」を6に変更します。ここで問題が発生します。すべての「＃Required」は、配列の最後のメンバーからXP値を取得し、再計算します。目標レベルが6の場合、102.2と表示されます。たとえば、「エビ」は511になります。

これが理にかなっていることを願っています。

4

1 に答える 1

1

わかりました-だから私は自分でフィドルを作成しました

http://jsfiddle.net/dD67p/2/

いくつかの変更を加える必要がありました-

スコーピング（私が推測したように）-calcItemは次のようになります：

function calcItem(name, image, xp, level) {
    var self2 = this;
    self2.name = name;
    self2.level = level;
    self2.xp = xp;
    self2.need = ko.computed(function () {
        var req = self.neededXp() / self2.xp;
        return req;
    });

newまた、オブジェクトを作成calcItemしてにプッシュするときに見逃しましたcalcContent。

populateFishing私は次のように変更しました

self.populateFishing = function () {
    self.calcContent.push(new calcItem('Shrimp', '#', 1, 10));
    self.calcContent.push(new calcItem('Sardine', '#', 5, 20));
    self.calcContent.push(new calcItem('Shark', '#', 110, 76));
    self.calcContent.push(new calcItem('Sea Turtle', '#', 38, 79));
    self.calcContent.push(new calcItem('Manta Ray', '#', 46, 81));
}

このフィドルでneededXpを更新すると、バインドされたデータの変化を確認できます。

于 2013-03-06T01:54:39.990 に答える