Question

我是Ko和映射插件的新手。

我必须从http://api.openweathermap.org/data/2.5/history/city?q=Vancouver,%20ca

的城市天气api中读取数据

并使用ko和映射在UI中显示它。

但是我在映射方面存在问题，因为数据没有出现在UI中。

ko.mapping.fromJS(models, self.ArrayOfModels);
http://jsfiddle.net/balain/ENMGp/536/

提前谢谢。

Answer 1

http://jsfiddle.net/ybo0zrwh/

this.SuccessfullyRetrievedModelsFromAjax = function(models) {
    self.ArrayOfModels.push(ko.mapping.fromJS(models));
};

看起来你不是从服务器上取回一组对象。您可以映射单个对象，然后将其推送到可观察数组。

Answer 2

首先，your fiddle使用真正的过时的淘汰版本（1.2.1是古老的）。我已将其更新为3.2.0。你也不需要任何jQuery模板插件。我已将其删除。

接下来，我建议构建视图模型，使它们自己处理，包括从init数据引导。像这样：

// Contained Model
function SearchResultModel(init) {
    // data
    this.message = ko.observable();
    this.cod = ko.observable();
    this.city_id = ko.observable();
    this.calctime = ko.observable();
    this.cnt = ko.observable();
    this.list = ko.observableArray();

    // init
    ko.mapping.fromJS(init, {}, this);
}

接下来，您可以压缩Ajax请求：

// View Model
function WeatherViewModel(init) {
    var self = this;

    // data
    self.city = ko.observable();
    self.searchResult = ko.observable(new SearchResultModel());

    // methods
    self.getWeatherByCity = function () {
        var city = self.city()
        if (city) {
            $.get('http://api.openweathermap.org/data/2.5/history/city', {
                q: city
            }).done(function(data) {
                self.searchResult(new SearchResultModel(data));
            }).fail(function () {
                alert("could not get weather data!");
            });
        } else {
            // no city? => empty the search result
            self.searchResult(new SearchResultModel());
        }
    };

    // init
    ko.mapping.fromJS(init, {}, self);
}

初始化样本数据：

ko.applyBindings(new WeatherViewModel({
    city: "Vancouver, CA"
}));

你很高兴：http://jsfiddle.net/ENMGp/539/。

由于你标记了这个[knockout-2.0]（我不知道为什么你想要一个新项目），我已经创建了一个2.0兼容版本：http://jsfiddle.net/ENMGp/540/。代码是一样的，但是淘汰2.0不适用于jQuery 1.9+，所以我不得不降级两个库。 FWIW，我建议使用当前版本的淘汰赛。

淘汰映射问题

2 个答案: