如何将 jQuery 数据处理更改为 openWeather API 的 Knockout 绑定

Question

我想使用 Knockout 数据绑定来更新我的 html div 元素中的天气 API 数据。目前，我正在使用 jQuery 来更新 DOM，但我更喜欢使用 Knockout。我还想动态更改位置 zip，以便天气特定于我的 div 中的那个位置。我有一个位置数组。

这是我的代码： html:

var zip = locations[0].zipcode;
var myOpenWeatherAPIKey = 'xxxxxxxxxxxxxxxxxxxx';
var openWeatherMapUrl = "http://api.openweathermap.org/data/2.5/weather?zip=" + zip + ",us&APPID=" + myOpenWeatherAPIKey + "&units=imperial";
console.log(zip);
//using JSON method for retrieving API data
$.getJSON(openWeatherMapUrl, function(data) {
    var parameters = $(".weather-data ul");
    var iconCode = data.weather[0].icon;
    var iconDescription = data.weather[0].main;
    var iconUrl = "http://openweathermap.org/img/w/" + iconCode + ".png";
    detail = data.main;
    windspd = data.wind;
    parameters.append('<li>Temp: ' + Math.round(detail.temp) + '° F <br></li>');
    parameters.append('<li><img style="width: 25px" src="' + iconUrl + '">  ' + iconDescription + '</li>');
}).fail(weatherError = function(e) {
    $(".weather-data").append("OpenWeatherAPI is unable to load!");
});

<div id="open-weather" class="open-weather">
    <div id="weather-data" class="weather-data">
        <p>  <br> Current Weather</p>
        <ul id="weather-items" class="weather-items">
        </ul>
    </div>
</div>

谢谢，

Answer 1

您可以编写 custom KO binding 或 custom KO component 来封装您的标记、API 密钥、jQuery 和 XHR 调用。

使用您的代码和用例，组件听起来很合适。然后你的消费标记可能看起来像

<weather params="zip: myZipCode"></weather>

其中myZipCode 是消费页面视图模型中的ko.observable。

更新 1

在代码中添加了粗略的代码，用于封装在 KO 组件中。

更新 2

将 jquery DOM 引用从 KO 组件代码中移出，因此组件模板使用 KO 绑定。添加了消费页面视图模型以显示完整示例。

function openWeatherComponentViewModel(params) {
  var self = this;
  
  self.zip = ko.observable(ko.unwrap(params.zip));
  self.temperature = ko.observable();
  self.iconCode = ko.observable();
  self.iconUrl = ko.pureComputed(function() {
    return "http://openweathermap.org/img/w/" + self.iconCode() + ".png";
  });
  self.iconDescription = ko.observable();
  self.hasWeather = ko.observable(false);
  self.errorMessage = ko.observable();
  
  var apiKey = 'xxxxxxxxxxxxxxxxxxxx';
  var url = "https://api.openweathermap.org/data/2.5/weather?zip=" + self.zip() + ",us&APPID=" + apiKey + "&units=imperial";  
  $.getJSON(url, function(data) {
    self.temperature(Math.round(data.main.temp));
    self.iconCode(data.weather[0].icon);
    self.iconDescription(data.weather[0].main);
    self.hasWeather(true);
  }).fail(function(error) {
    self.hasWeather(false);
    self.errorMessage("OpenWeatherAPI is unable to load! " + error.responseJSON.message);
  });
}

ko.components.register('weather-component', {
  viewModel: openWeatherComponentViewModel,
  template: `<div id="open-weather" class="open-weather">
                <div id="weather-data" class="weather-data" data-bind="if: hasWeather()">
                    <p>Current Weather for Zip Code <span data-bind="text: zip"></span></p>
                    <ul id="weather-items" class="weather-items">
                      <li>Temp: <span data-bind="text: temperature"></span>° F</li>
                      <li><img style="width: 25px" data-bind="attr: { src: iconUrl }"><span data-bind="text: iconDescription"></span></img></li>
                    </ul>
                </div>
                <div id="weather-data" class="weather-data" data-bind="if: !hasWeather()">
                    <span data-bind="text: errorMessage"></span>
                <div>
            </div>`
});

function myConsumingPageViewModel() {
  var self = this;
  self.myZipCode = ko.observable("80130");
}

var vm = new myConsumingPageViewModel();

ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<weather-component params="zip: myZipCode"></weather-component>