Question

我是淘汰赛的新手，从下拉列表中获取所选值时遇到问题。我尝试将值更改为“selectedCity”，然后收到[Object object]。谢谢！

我的HTML

<select data-bind="options: Cities, optionsText: 'CityNameRu', value: selectCity">
</select>

<span data-bind="text: selectedCity"></span>

敲除

function CityModel(data) {
    var self = this;
    this.CityId = ko.observable(data.CityId);
    this.CityNameRu = ko.observable(data.CityNameRu);
    this.CityName = ko.observable(data.CityName);
}

function ViewModel() {
    var self = this;
    self.Cities = ko.observableArray([]);
    self.selectedCity = ko.observable();

    self.selectCity = function (city) {
        self.selectedCity(city.CityNameRu);
    };

    self.GetCities = function () {
        $.ajax({
            type: "GET",
            url: '/FetchCities',
            dataType: "json",
            success: function (data) {
                self.SuccessfullyRetrievedModelsFromAjax(data);

            },
            error: function (err) {
                alert(err.status + " : " + err.statusText);
            }
        });
    };

    this.SuccessfullyRetrievedModelsFromAjax = function (models) {
        ko.utils.arrayForEach(models, function (model) {
            self.Cities.push(new CityModel(model));
        });
    };

JSON响应：

[{"CityId":1,"CityName":"philadelphia","CityNameRu":"Филадельфия"},{"CityId":2,"CityName":"new-york","CityNameRu":"Нью Йорк"}

Answer 1

将整个城市对象设置为selectedCity的值。您还可以添加计算的observable来检索文本。

function ViewModel() {
    var self = this;
    self.Cities = ko.observableArray([]);
    self.selectedCity = ko.observable();

    self.selectCity = function (city) {
        self.selectedCity(city);
    };

    self.selectedCityNameRu = ko.pureComputed(function () {
        var selectedCity = self.selectedCity();
        return selectedCity ? selectedCity.CityNameRu : '';
    }, self);

然后在你的html绑定到selectedCityNameRu

<span data-bind="text: selectedCityNameRu"></span>

Answer 2

改变一些事情：

不需要selectCity函数，只需将value直接绑定到observable即可。
span text绑定到一个observable，其中包含对城市的引用，因此text将尝试呈现该引用，以及它可以通过例如“对象对象”。相反，执行observable以获取其值，然后选择要显示为文本的属性。
```
<span data-bind="text: !!selectedCity() ? selectedCity().CityNameRu : ''"></span>
```

或者，您可以使用with绑定。方法如下：

var data = [{"CityId":1,"CityName":"philadelphia","CityNameRu":"Филадельфия"},{"CityId":2,"CityName":"new-york","CityNameRu":"Нью Йорк"}];

var $ = { ajax: function(opts) { opts.success(data); } };

function CityModel(data) {
  var self = this;
  this.CityId = ko.observable(data.CityId);
  this.CityNameRu = ko.observable(data.CityNameRu);
  this.CityName = ko.observable(data.CityName);
}

function ViewModel() {
  var self = this;
  
  self.Cities = ko.observableArray([]);
  self.selectedCity = ko.observable();

  self.GetCities = function() {
    $.ajax({
      success: function(data) {
        self.SuccessfullyRetrievedModelsFromAjax(data);
      }
    });
  };

  self.SuccessfullyRetrievedModelsFromAjax = function(models) {
    ko.utils.arrayForEach(models, function(model) {
      self.Cities.push(new CityModel(model));
    });
  };
  
  self.GetCities();
}

ko.applyBindings(new ViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>

<select data-bind="options: Cities, optionsText: 'CityNameRu', value: selectedCity">
</select>

<div data-bind="with: selectedCity">
  <span data-bind="text: CityId"></span> -
  <span data-bind="text: CityName"></span> -
  <span data-bind="text: CityNameRu"></span>
</div>

<hr>

Debug info: <pre data-bind="text: ko.toJSON($root, null, 2)"></pre>

从Knockout.js中的下拉列表中获取所选值

2 个答案: