Question

我有两个与Knockout一起使用的连接下拉菜单。他们两个我都填充了一个简单的Value，Text对，我从ajax调用加载。当我去更改值时，我总是从所选列表中获取先前的值。因此，如果默认的RegionCode值是＆＃34; -1＆＃34;当我将其更改为另一个区域时，将传递给loadLocationList的第一个RegionCode值将是＆＃34; -1＆＃34;即使实际选择的值与我通过检查元素或通过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 -->

Answer 1

不要绑定到select上的change事件。请改为订阅value变量。在Knockout中，我们的想法始终是在模型中表示视图，然后专门使用视图。

淘汰赛给出了之前选择的价值

1 个答案: