Question

我的目标是使用if语句从我的代码中的另一个变量中提供值。

HTML

<div id="countryContainer">
    <div class="label">
        Country:
    </div>
    <select id="countryDropDown"
        data-bind="options: availableCountries,
                   optionsText: 'countryName',
                   value: selectedCountry">
    </select>
</div>

的Javascript

var mxLocations = [
 {title: 'Monterrey', location: {lat: 25.6475262, lng: -100.4524278 }},
 {title: 'Tulum, Quintana Roo', location: {lat: 20.2114185, lng: -87.4653502 }},
 {title: 'Tijuana', location: {lat: 32.5335808, lng: -117.1236801 }},
 {title: 'Guadalajara', location: {lat: 20.676856, lng: -103.344773 }}
];
var usLocations = [
  {title: 'Laredo', location: {lat: 30.3079827, lng: -97.8934848 }},
  {title: 'Venice Beach', location: {lat: 33.9799948, lng: -118.478614 }},
  {title: 'Miami', location: {lat: 25.7825453, lng: -80.2994983 }},
  {title: 'Wichita', location: {lat: 37.6647979, lng: -97.5837763 }}
];

var home = [
  {title: 'Laredo', location: {lat: 30.3079827, lng: -97.8934848 }}
];

var allLocations = (mxLocations.concat(usLocations)).concat(home);
var locations = ""

function getData(dropdown) {
    var value = dropdown.options[dropdown.selectedIndex].value;
    alert(this.value);
}

// Knockout Constructor
var Country = function(name) {
        this.countryName = ko.observable(name);
    };

    var viewModel = {
        availableCountries : ko.observableArray([
            new Country("All Locations"),
            new Country("Home"),
            new Country("Mexico"),
            new Country("USA")
        ]),
        selectedCountry : ko.observable() // Nothing selected by default
    };

ko.applyBindings(viewModel);

这就是我想要完成的，如果选择了dropDown菜单中的值，我想将变量的值赋给另一个变量

function locations() {
    if (dropDownValue == "All Locations") {
        var locations = allLocations;
    } else if (dropDownValue == "Home") {
        var locations = home;
    } else if (dropDownValue == "Mexico") {
        var locations = mxLocations;
    } else if (dropDownValue == "USA") {
        var locations = usLocations;

我一直在寻找这个地方来完成这个没有结果我希望你可以解决我正确的方向

Answer 1

您可以subscribe JSON观察到selectedCountry。每次subscribe更改时，都会调用作为参数传递给selectedCountry的回调函数。

这是一个工作片段：

var mxLocations = [
 {title: 'Monterrey', location: {lat: 25.6475262, lng: -100.4524278 }},
 {title: 'Tulum, Quintana Roo', location: {lat: 20.2114185, lng: -87.4653502 }},
 {title: 'Tijuana', location: {lat: 32.5335808, lng: -117.1236801 }},
 {title: 'Guadalajara', location: {lat: 20.676856, lng: -103.344773 }}
];
var usLocations = [
  {title: 'Laredo', location: {lat: 30.3079827, lng: -97.8934848 }},
  {title: 'Venice Beach', location: {lat: 33.9799948, lng: -118.478614 }},
  {title: 'Miami', location: {lat: 25.7825453, lng: -80.2994983 }},
  {title: 'Wichita', location: {lat: 37.6647979, lng: -97.5837763 }}
];

var home = [
  {title: 'Laredo', location: {lat: 30.3079827, lng: -97.8934848 }}
];

var allLocations = (mxLocations.concat(usLocations)).concat(home);
var locations = ""

var Country = function(name) {
  this.countryName = ko.observable(name);
};

var viewModel = {
  availableCountries: ko.observableArray([
    new Country("All Locations"),
    new Country("Home"),
    new Country("Mexico"),
    new Country("USA")
  ]),
  selectedCountry: ko.observable()
};

viewModel.selectedCountry.subscribe(function(selectedValue) {
  if (selectedValue.countryName() == "All Locations") {
    locations = allLocations;
  } else if (selectedValue.countryName() == "Home") {
    locations = home;
  } else if (selectedValue.countryName() == "Mexico") {
    locations = mxLocations;
  } else if (selectedValue.countryName() == "USA") {
    locations = usLocations;
  }
  console.log(locations);
});

ko.applyBindings(viewModel);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div class="label">
  Country:
</div>
<select id="countryDropDown" data-bind="options: availableCountries,
                   optionsText: 'countryName',
                   value: selectedCountry">
</select>

点击Run code snippet进行测试。

使用dropDown菜单为具有knockout的变量赋值

1 个答案: