如何更改选择组件'使用Knockout从JS(TS）中获取s值

How can I change select component's value from JS(TS) with using Knockout?

本文关键字：TS JS 获取 Knockout 组件 选择 何更改 使用      更新时间：2023-09-26

我有两个select组件，它们应该相互影响。我试着用手册来解决这个问题，但我很惊讶。

注意1:selectedIndex不起作用。

注意2:在JS（TS）处更改值不会更新组件。

这是HTML代码：

        <select data-bind="options: interestRates, optionsText: 'TaksitAraligi', value: selectedInstallmentRange"></select>
        <select data-bind="options: interestRates, optionsText: 'TutarAraligi', value: selectedAmountRange"></select>
        <div class="summary-row-item-value">
                % {{interestRates()[selectedRate()].FaizOrani}}
        </div>

这是TypeScript代码

this.selectedInstallmentRange.subscribe(function (value) {
        if (value && value.TaksitAraligi) {
            if (_self.willChange)
                _self.interestRates().forEach(function (item: any, i: number = 0) {
                    if (item.TaksitAraligi === value.TaksitAraligi) {
                        _self.selectedRate(i);
                        _self.willChange = false;
                        _self.selectedAmountRange(_self.interestRates()[_self.selectedRate()].TutarAraligi);
                    }
                    i++;
                });
            else
                _self.willChange = true;
        }
    });
    this.selectedAmountRange.subscribe(function (value) {
        if (value && value.TutarAraligi) {
            if (_self.willChange)
                _self.interestRates().forEach(function (item: any, i: number = 0) {
                    if (item.TutarAraligi === value.TutarAraligi) {
                        _self.selectedRate(i);
                        _self.willChange = false;
                        _self.selectedInstallmentRange(_self.interestRates()[_self.selectedRate()].TaksitAraligi);
                    }
                    i++;
                });
            else
                _self.willChange = true;
        }
    });

由于无限循环，我添加了willChange。

第二个问题解决了。我一直在错误地更新数据。不应该是那样的；

_self.selectedAmountRange(_self.interestRates()[_self.selectedRate()].TutarAraligi);

正确使用；

_self.selectedAmountRange(_self.interestRates()[_self.selectedRate()]);

我不清楚您到底想实现什么，但您可以使用ko.computed()更新依赖选择上的options。或者，如果您需要更新从属选择中的value，您可以订阅第一个的更改。

模板：

<div>
    <h3>Controller Select:</h3>
    <select data-bind="options: select1Options, value: select1Value"></select>
</div>
<div>
    <h3>Select with options dependency:</h3>
    <p>(options updated based on controller selection)</p>
    <select data-bind="options: select2Options"></select>
</div>
<div>
    <h3>Select with value dependency:</h3>
    <p>(value updated based on controller selection)</p>
    <select data-bind="options: select3Options, value: select3Value"></select>
</div>

ViewModel:

function ViewModel() {
    var self = this;
    this.select1Options = ko.observableArray(['asd', 'lol', 'rofl']);
    this.select3Options = ko.observableArray(['asd', 'lol', 'rofl']);
    this.select1Value = ko.observable(null);
    this.select3Value = ko.observable(null);
    this.optionsMap = {
        'asd': [ 'asd_suboption_1', 'asd_suboption_2', 'asd_suboption_3' ],
        'lol': [ 'lol_suboption_1', 'lol_suboption_2', 'lol_suboption_3' ],
        'rofl': [ 'rofl_suboption_1', 'rofl_suboption_2', 'rofl_suboption_3' ],
    }
    this.select2Options = ko.computed(function(){
        return self.optionsMap[self.select1Value()];
    });
    this.select1Value.subscribe(function(value){
        self.select3Value(value);
    });
};
ko.applyBindings(ViewModel);

工作示例：https://jsfiddle.net/vqzvu4pw/9/

相关文章：