敲除映射问题

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 使用了真正过时的 knockout 版本（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/。代码是一样的，但是 knockout 2.0 不适用于 jQuery 1.9+，所以我不得不降级这两个库。 FWIW，我建议使用当前版本的淘汰赛。

敲除映射问题

Knockout Mapping Issue

knockout-mapping-plugin

knockout-2.0

knockout.js