2

助けてください

私は2つの選択ボックスを持っています。1つの選択値を変更できるようにしたいのですが、もう1つは計算されて選択されます

問題は、1 つの選択ボックスから値を選択し、2 番目の選択ボックスに計算が存在しない場合です。たとえば、リスク量を 700 に設定した場合、投資額は 1400 である必要があり、投資額の選択ボックスには表示されません。

私がしたいのは、それを選択ボックスに表示することですが、オプションとして追加することではありません

ところで、選択は双方向に機能するはずです

助けてください

http://jsfiddle.net/Z3mCH/

HTML

Invest Amount:
<select style="width:70px;height:22px;" data-bind="options: AvailableInvestAmount, 
                                                    optionsText: function(item) {
                                                        return '$' + item;
                                                    },
                                                    value: InvestAmount"></select>
<span data-bind="text: InvestAmount"></span>

<br />
<br />

Risk Amount:
<select style="width:70px;height:22px;" data-bind="options: AvailableRiskAmount, 
                                                    optionsText: function(item) {
                                                        return '$' + item;
                                                    },
                                                    value: RiskAmount"></select>
<span data-bind="text: RiskAmount"></span>

ビューモデル

var viewModel = {
    RiskAmount: ko.observable(200)
};

viewModel.AvailableInvestAmount = ko.observableArray(['200', '400', '500', '600', '700', '800', '900', '1000', '1200', '1500', '2000', '3000', '5000']);
viewModel.AvailableRiskAmount = ko.observableArray(['200', '400', '500', '600', '700', '800', '900', '1000', '1200', '1500', '2000', '3000', '5000']);

viewModel.InvestAmount = ko.computed({
    read: function () {
        return this.RiskAmount() * 2;
    },
    write: function (value) {
        this.RiskAmount(value / 2);
    },
    owner: viewModel
});

ko.applyBindings(viewModel);
4

2 に答える 2

3

http://jsfiddle.net/vol7ron/RZjPx/

したがって、正しく機能しているように見えますが、計算すると、他のリストに存在しない値 (x/2) を見つけようとしています。したがって、例が他のリストに存在する1000場所のような値に対して機能することがわかります。500

一般に、両方を自動的に更新することはお勧めできません。多くの場合、無限ループのような状態で終了します。代わりに、クリック時にこれらの計算を実行することを検討することをお勧めします。[awesome] チュートリアルをチェックして、カスタム バインディングを作成してください。

また、上記のフィドルは、viewModel の実装方法を示しています。あなたのものはうまくいくかもしれませんが、ドキュメントが教えている方法に近い方法で実装すると、従うのが簡単になります。KOはまだまだ勉強中なので、今後スタンスが変わるかもしれません。

于 2013-02-01T02:40:46.453 に答える
1

jqueryを使用して、計算されたバインディングの代わりに関数をバインドして、iを機能させることができました

http://jsfiddle.net/abbasmhd/Z3mCH/14/

var viewModel = {
    RiskAmount: ko.observable(200)
};

viewModel.AvailableInvestAmount = ko.observableArray(['200', '200', '400', '500', '600', '700', '800', '900', '1000', '1200', '1500', '2000', '3000', '5000']);
viewModel.AvailableRiskAmount = ko.observableArray(['200', '200', '400', '500', '600', '700', '800', '900', '1000', '1200', '1500', '2000', '3000', '5000']);


viewModel.CalculateInvestAmount = function () {
    var riskAmount = $('#RiskAmount').val();
    var investAmount = riskAmount * 2;
    $('#InvestAmount option:first').val(investAmount).text('$' + investAmount);
    $('#InvestAmount').val(investAmount);

};

viewModel.CalculateRiskAmount = function () {
    var investAmount = $('#InvestAmount').val();
    var riskAmount = investAmount / 2;
    console.log(investAmount);
    console.log(riskAmount);
    $('#RiskAmount option:first').val(riskAmount).text('$' + riskAmount.toFixed(0));
    $('#RiskAmount').val(riskAmount.toFixed(0));
};

ko.applyBindings(viewModel);
于 2013-02-05T01:04:17.113 に答える