入門選擇從下拉列表中值Knockout.js

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

將全市對象值f或selectedCity。您還可以添加計算的可觀察值來檢索文本。

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直奔觀察到。

• 的span text綁定到可觀察到的，其保持參照城市，所以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>