Проблема с отображением нокаута

Я новичок в Ko и картографическом плагине.

Мне нужно прочитать данные из API погоды города с http://api.openweathermap.org/data/2.5/history/city?q=Vancouver,%20ca

и отображать его в пользовательском интерфейсе, используя ko и отображение.

Однако у меня проблема с отображением, и из-за этого данные не отображаются в пользовательском интерфейсе.

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

Заранее спасибо.


knockout.js knockout-mapping-plugin knockout-2.0
person balaG    schedule 30.01.2015    source источник
comment
код находится в jsfiddle.net/balain/ENMGp/536.   -  person balaG    schedule 30.01.2015
comment
Спасибо Томалак за помощь. Но все равно данные не отображаются в пользовательском интерфейсе. ‹div data-bind=foreach: ArrayOfModels› ‹div data-bind=text: cod›‹/div› ‹div data-bind=text: message›‹/div› ‹/div›Я делаю что-то неправильно в данных? привязка. Вы можете увидеть мою скрипку, пожалуйста?   -  person balaG    schedule 30.01.2015

Ответы (2)


arrow_upward
0
arrow_downward

Во-первых, ваша скрипка использует действительно устаревшую версию нокаута ( 1.2.1 древний). Я обновил его до 3.2.0. Также вам не нужен плагин шаблона jQuery для чего-либо. Я удалил его.

Далее, я бы порекомендовал построить ваши модели представления таким образом, чтобы они сами о себе заботились, включая загрузку из данных инициализации. Вот так:

// 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);
}

init с примерами данных:

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, я бы рекомендовал использовать текущую версию нокаута.

person Tomalak    schedule 30.01.2015

arrow_upward
0
arrow_downward

http://jsfiddle.net/ybo0zrwh/

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

Не похоже, что вы возвращаете массив объектов с сервера. Вы можете отобразить один объект, а затем поместить его в наблюдаемый массив.

person drgnlrds    schedule 30.01.2015