我有两个与Knockout一起使用的下拉菜单。我都使用从ajax调用加载的简单Value,Text对填充了这两个参数。
但是,当我更改值时,我总是从所选列表中获取先前的值。因此,如果默认的RegionCode值为“ -1”,则当我将其更改为另一个区域时将传递给loadLocationList的第一个RegionCode值将为“ -1”,即使实际选择的值与通过检查元素或通过JQuery

模型

define([
    'util',
    'locationService',
    'jquery',
    'knockout',
    'knockoutmapping',
function(util, svc, $, ko, mapped) {
    var LocationViewModel = function(regionCodes, regionCode, locationCodes, locationCode, currentYear) {
        var self = this;

        self.CurrentYear = currentYear;
        self.RegionCode = ko.observable(regionCode)
        self.RegionCodes = ko.observableArray(regionCodes)

        self.LocationCode = ko.observable(locationCode)
        self.LocationCodes = ko.observableArray(locationCodes)

        self.loadLocationList = function() {
            self.LocationCodes([]);
            var locationListCallback = function(data){
                for (var i = 0; i < data.length; i++) {
                    self.LocationCodes.push(new SelectListPair(data[i].Value, data[i].Text));
                }
            }
            svc.getLocationsInRegion(self.CurrentYear, self.RegionCode, true, locationListCallback);
        }
    }

    var SelectListPair = function (value, text) {
        this.Value = ko.observable(value);
        this.Text = ko.observable(text);
    }

    return function summaryViewModel() {
        var self = this;

        self.LocationSummaryViewModel = ko.observable();

        var initViewModel = function() {
            $.ajax({
                url: 'Url here',
                success: function(vm) {
                    var locationVM = vm.LocationSummaryViewModel;
                    var selectListArray = locationVM.LocationList;
                    var selectList = [];

                    for (var i = 0; i < selectListArray.length; i++) {
                        var SelectListPair = {
                            Value: ko.observable(selectListArray[i].Value),
                            Text: ko.observable(selectListArray[i].Text),
                        };
                        selectList.push(SelectListPair);
                    }
                    var location = [new SelectListPair("-1", "Please select a location")];

                    self.LocationSummaryViewModel(new LocationViewModel(vm.CurrentYear, selectList, "-1", location, "-1"));
                },
            });
        }
    }
    self.initViewModel();
});


视图

<!-- ko with: LocationSummaryViewModel() -->
<div class="panel panel-default" data-bind="visible: Visible()">
    <div class="panel-heading">
        <div class="row">
            <div class="col-md-4">
                Location Summary
            </div>
            <div class="col-md-4">
                <select class="form-control" data-bind="
                    options: RegionCodes(),
                    disable: RegionCodes().length === 1,
                    optionsText: 'Text',
                    optionsValue: 'Value',
                    event: {change: loadLocationList },
                    value: RegionCode">
                </select>
            </div>
            <div class="col-md-4">
                <select class="form-control" data-bind="
                    options: LocationCodes(),
                    disable: LocationCodes().length === 1,
                    optionsText: 'Text',
                    optionsValue: 'Value',
                    value: LocationCode">
                </select>
            </div>
        </div>
    </div>
    <div class="panel-body">
        Neat content
    </div>
    <div class="panel-footer">
        &nbsp;
    </div>
</div>
<!-- /ko -->

最佳答案

不要绑定到选定的change事件。订阅value变量。在淘汰赛中,想法始终是在模型中表示视图,然后专门使用视图。

关于javascript - knockout 赋予先前选定的值(value),我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/35703562/

10-11 19:27
查看更多