Question

我需要帮助

我有2个选择框，我希望能够更改一个选择值，另一个将被计算和选择

问题是当我从一个选择框中选择一个值并且第二个选择框中不存在计算时，例如，如果我将风险金额设置为700，则投资金额应为1400，它将不会显示在Invest中金额选择框

我想要发生的是在选择框中显示它，但不将其添加为选项

通过选择应该双向工作的方式

请帮助

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);

Answer 1

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

所以它似乎正常工作，但是当它计算时，它试图找到另一个列表中不存在的值（x / 2）。因此，您可以看到您的示例适用于1000等值，其中500存在于另一个列表中。

通常，自动更新两者都是一个坏主意 - 它通常会以无限循环的方式结束。相反，您可能想要考虑在点击时执行这些计算。查看[awesome]教程create custom bindings。

另外，我的小提琴显示了应该如何实现viewModel。虽然您的工作可能有效，但如果您更接近文档的教学方式，则更容易理解。我自己还在学习KO，所以我的立场可能会在将来改变。

Answer 2

我设法让我使用jquery并绑定函数而不是计算绑定

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);

在knockoutjs中为select中添加2路值

2 个答案: