1

私はバックエンドにこの機能を持っています:

public JsonResult GetEstados()
{
    List<State> states = new List<State>() {
        new State(1, "Acre", "AC"),
        new State(2, "Alagoas", "AL"),
        new State(3, "Amapá", "AP")
        ...
    };

    List<City> cities = new List<City>() {
        new City(1, "Rio Branco", states[0]),
        new City(2, "Brasília", states[6]), 
        new City(4, "Belo Horizonte", states[12])
        ....
    };

    return Json(new {
        states = states,
        cities = cities
    }, JsonRequestBehavior.AllowGet);
}

目的は、都市と州のコレクションを取得することです。select選択した州を変更すると、その州に属する都市で要素を埋めたいと思います。次に、以下の KnockoutJS コードを作成しました。

function State(state) {

    this.id = state.Id;
    this.name = state.Name;
    this.abbreviation = state.Abbreviation;
}

function Cidade(city) {

    this.id = city.Id;
    this.name = city.Name;
    this.state = new State(ko.toJS(city.State));
}

function IndexViewModel() {

    var self = this;

    self.states = ko.observableArray();
    self.cities = ko.observableArray();
    self.selectedState = ko.observable();
    self.selectedCity = ko.observable();


    self.citiesFromSelectedState = ko.computed(function() {
        return ko.utils.arrayFilter(self.cities(), function(city) {
            return city.state().id() == self.selectedState();
        }
    }, self);

}

var model = new IndexViewModel();
$.ajax({
    type: 'GET',
    async: false,
    url: '/Home/GetEstados/',
    success: function(result) {
        ko.utils.arrayForEach(result.states, function(state) {
            model.states().push(new State(ko.toJS(state)));
        });

        ko.utils.arrayForEach(result.cities, function(city) {
            model.cities().push(new City(ko.toJS(city));
        });
    }
});
ko.applyBindings(model);

わかりました、これが都市と州の observableArray を作成する手順です。

私のビューには、州と都市を表示する次のコードがあります。

<div class="form-group col-lg-4 col-md-4 col-sm-6 col-xs-12">
    <label class="sr-only" for="estado">State</label>
        <select class="form-control" data-bind="
         options: states, 
         optionsText: 'name', 
         optionsValue: 'id', 
         value: selectedState, 
         optionsCaption: ' '"></select>
</div>

<div class="form-group col-lg-8 col-md-8 col-sm-6 col-xs-12">
    <label class="sr-only" for="cidade">City</label>
        <select class="form-control" data-bind="
         options: citiesFromSelectedState, 
         optionsText: 'name', 
         optionsValue: 'id', 
         value: selectedCity, 
         optionsCaption: ' '"></select>
</div>

しかし、それは正しく機能していません。私は何か間違ったことをしましたか？助けてくれてありがとう！

4

1 に答える 1

1

観察可能な状態は評価されるべきではありません。項目を observableArray とその評価に追加する必要があります。states の後の括弧を削除します。

model.states.push(new State(ko.toJS(state)));

model.states.push は、アイテムを observableArray に追加します。そして、model.states().push は、observableArray の内部状態のコピーである配列にアイテムを追加します。

応答 ：

id はオブザーバブルではないため、呼び出すことはできません。このスニペットを使用することをお勧めします。これにより、 selectedState と citysFromSelectedState の間に依存関係が作成されます。

self.citiesFromSelectedState = ko.computed(function() {
    var state = self.selectedState();
    return ko.utils.arrayFilter(self.cities(), function(city) {
        return city.state.id == state;
    }
}, self);
于 2013-11-07T15:14:50.423 に答える