加入2個值的選擇在knockoutjs

Question

我需要幫助，請

我有2個選擇框，我希望能夠改變一個選擇值，另一個將被計算和選擇

的問題是當我從一個選擇框中選擇一個值並且計算不存在於第二個選擇框中時，例如，如果我將Risk Amount設置爲700，投資額應該是1400，它將不會顯示在Invest Amount選擇框中

我想要發生的是將其顯示在選擇框中，但不會將其添加爲選項

的方式選擇應工作方式都

請幫助

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

Answer 1

我設法讓我使用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); 

Answer 2

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

所以看起來它工作正常，但是當它計算，它試圖找到沒有在其他列表中存在的值（X/2）。所以你可以看到你的例子適用於1000這樣的值，其中500存在於另一個列表中。

通常，自動更新都是不好的 - 它通常會以無限循環狀態結束。相反，您可能想要考慮點擊執行這些計算。查看create custom bindings的[awesome]教程。

另外，我上面的小提琴顯示了viewModel應該如何實現。雖然你的工作可能會有效，但如果你更接近文檔教學的方式，則更容易遵循。我自己還在學習KO，所以我的立場可能會在未來發生變化。